EasyUI edatagrid插件使用小計

html片段

 1    <table id="menuview" style="width:100%">
 2         <thead>
 3             <tr>
 4                 <th field="ID0" width="5%" fixed="true" checkbox="true"></th>
 5                 <th field="TOPIC" width="30%" fixed="true" editor="{type:'validatebox',options:{required:true,missingMessage:'目錄名稱不能為空。',height:'100px'}}">目錄名稱</th>
 6                 <th field="WJBH" width="10%" fixed="true" editor="text">文件編號</th>
 7                 <th field="ARCHUSER" width="10%" fixed="true" editor="text">責任者</th>
 8                 <th field="PAGECOUNT" width="5%" fixed="true" editor="numberbox">頁數</th>
 9                 <th field="YH" width="5%" fixed="true" editor="text">頁號</th>
10                 <th field="RQ" width="10%" fixed="true" editor="{ type:'datebox',options:{editable:false}}">日期</th>
11                 <th field="ISSCJNML" width="10%" fixed="true" editor="{ type:'checkbox',options:{on: 1,off:0}}" align="center" formatter="rowCheckBoxFormater">是否生成件內目錄</th>
12                 <th field="BZ" width="15%" fixed="true" editor="text">備註</th>
13             </tr>
14         </thead>
15     </table>

javascript 片段

  1 $('#menuview').edatagrid({
  2             idField: 'ID0',//主鍵
  3             rownumbers: true,//序號
  4             pagination: false,//是否分類
  5             fitColumns: true,//配合列拖動時，禁止列自適應寬度
  6             singleSelect: false,  //是否單選,
  7             url: "GetCatalogNew?ARCHGID=" + vARCHGID + "&ISSJ=" + vISSJ,//獲取數據url
  8             pageSize: 15,//分頁配置
  9             pageList: [15, 30, 45, 60],//分頁配置
 10             toolbar: '#tb',//工具
 11             autoSave: false,//是否自動報錯
 12             selectOnCheck: true,
 13             checkOnSelect: false,
 14             saveUrl: "CatalogAddYY?ISSJ=" + vISSJ,        //新建,都是eadatagrid封裝好的,把鏈接填好就行,點擊之後會自動發送json數據包
 15             updateUrl: "CatalogAddYY?ISSJ=" + vISSJ,      //保存
 16             destroyUrl: "CatalogAddYY?ISSJ=" + vISSJ,      //刪除
 17             destroyMsg: {
 18                 norecord: {    // 在沒有記錄選擇的時候執行
 19                     title: '警告',
 20                     msg: '沒有要刪除的記錄。'
 21                 },
 22                 confirm: {       // 在選擇一行的時候執行
 23                     title: '確認',
 24                     msg: '您確定要刪除嗎?'
 25                 }
 26             },
 27             onBeforeLoad: function (param) {
 28             },
 29             onLoadSuccess: function (data) {
 30                 $(this).datagrid('enableDnd');
 31             },
 32             onLoadError: function () {
 33             },
 34             onDestroy: function (index, row) {
 35             },
 36             onAdd: function (index, row) {
 37                 row.ARCHGID = vARCHGID;
 38             },
 39             onBeforeSave: function (index) {
 40                 return true;
 41             },
 42             onSave: function (index, row) {
 43                 var $datagrid = $('#menuview');
 44                 if ($datagrid.data('isSave')) {
 45                     //如果需要刷新，保存完後刷新
 46                     $datagrid.edatagrid('reload');
 47                     $datagrid.removeData('isSave');
 48                 }
 49             },
 50             onBeforeDrag: function (row) {
 51                 var vSelectRowIndex = $('#menuview').datagrid('getRowIndex', row);//獲取選擇行索引
 52                 var vEditRowIndex = $('#menuview').datagrid('getEditingRowIndexs')//獲取編輯行索引
 53                 if (vSelectRowIndex == vEditRowIndex) { //防止 編輯行拖動bug
 54                     return false;
 55                 }
 56             },
 57             //拖拽某行到指定位置後觸發
 58             onDrop: function (targetRow, sourceRow, point) {
 59                 //獲取拖拽後的數據行
 60                 var rows = $('#menuview').edatagrid("getRows");
 61                 var id0 = "";
 62                 var vLength = rows.length;
 63                 for (var i = 0; i < vLength; i++) {
 64                     id0 += rows[i].ID0 + ",";
 65                 }
 66                 MaskUtil.mask();
 67                 $.post("UpFileOrder?ID0=" + id0 + "&ISSJ=" + vISSJ, function (response) {
 68                     $('#menuview').edatagrid("reload");
 69                     MaskUtil.unmask();
 70                 });
 71             },
 72             toolbar: [{
 73                 text: '增加',
 74                 iconCls: 'icon-add',
 75                 handler: function () {
 76                     $('#menuview').edatagrid('addRow');
 77                 }
 78             }, {
 79                 text: '保存',
 80                 iconCls: 'icon-save',
 81                 handler: function () {
 82                     //標記需要刷新
 83                     $('#menuview').data('isSave', true).edatagrid('saveRow');
 84                 }
 85             }, {
 86                 text: '合併',
 87                 iconCls: 'icon-save',
 88                 handler: function () {
 89                     //標記需要刷新
 90                     $('#menuview').data('isSave', true).edatagrid('saveRow');
 91                 }
 92             }, {
 93                 text: '分割',
 94                 iconCls: 'icon-save',
 95                 handler: function () {
 96                     //標記需要刷新
 97                     $('#menuview').data('isSave', true).edatagrid('saveRow');
 98                 }
 99             }, '-',
100 
101             '-', {
102                 text: '刪除',
103                 iconCls: 'icon-save',
104                 handler: function () {
105                     delData();
106                 }
107             }, {
108                 text: '刷新',
109                 iconCls: 'icon-reload',
110                 handler: function () {
111                     $('#menuview').edatagrid('reload');
112                 }
113             }]
114         });
115     });
116     /*
117 *  datagrid 獲取正在編輯狀態的行，使用如下：
118 *  $('#id').datagrid('getEditingRowIndexs'); //獲取當前datagrid中在編輯狀態的行編號列表
119 */
120     $.extend($.fn.datagrid.methods, {
121         getEditingRowIndexs: function (jq) {
122             var rows = $.data(jq[0], "datagrid").panel.find('.datagrid-row-editing');
123             var indexs = [];
124             rows.each(function (i, row) {
125                 var index = row.sectionRowIndex;
126                 if (indexs.indexOf(index) == -1) {
127                     indexs.push(index);
128                 }
129             });
130             return indexs;
131         }
132     });