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>

View Code

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     });

View Code

 

 

转载于:https://www.cnblogs.com/dahuo/p/7777004.html