0

JQuery-DataTables-Editable-1.3をDataTables-1.9.4と一緒に使用しています。add_delete_toolbarを追加できます。ただし、追加ボタンをクリックしても、formAddNewRowはページの中央に配置されません。多くの組み合わせを検索して試しました。

$('#example').dataTable( {
                "bJQueryUI": true,
                "sPaginationType": "full_numbers",
                "bProcessing": true,
                "bServerSide": true,                    
                "sAjaxSource": "scripts/prgrm_mstr.php",
                "aoColumns": [
                      { "mData": "0", sDefaultContent: "" },
                      { "mData": "1", sDefaultContent: "" }
                    ]                   
            } ).makeEditable({
                        sUpdateURL: function(value, settings)
                                         {
                                               return(value); //Simulation of server-side response using a callback function
                                         },
                        sAddURL: "scripts/AddData.php",                         
                        sDeleteURL: "scripts/DeleteData.php",
                        sAddDeleteToolbarSelector: ".dataTables_length",
                                oAddNewRowButtonOptions: {  label: "Add...",
                                                icons: {primary:'ui-icon-plus'} 
                                },
                                oDeleteRowButtonOptions: {  label: "Delete",
                                                icons: {primary:'ui-icon-trash'}
                                },
                                oAddNewRowFormOptions: {    
                                                title: 'Add a new program',
                                                show: "blind",
                                                hide: "blind",
                                                modal: true                                                 
                                }                                   
            });

フォームは次のとおりです-

<form id="formAddNewRow" action="#" title="Add new record">
                <label for="prgrm_id">Program ID</label>
                <input type="text" name="prgrm_id" id="prgrm_id" class="required" rel="0" />
                <label for="prgrm_nm">Program Name</label>
                <input type="text" name="prgrm_nm" id="prgrm_nm" class="required" rel="0" />
        </form>
4

1 に答える 1

0

私は次のCSSの変更を行うことで管理しました-

.ui-dialog { margin-top:-300px;margin-left:400px;}
于 2013-01-14T09:38:11.737 に答える