查看: 1268|回复: 0

[JavaScript/JQuery] EasyUI edatagrid插件使用小计

发表于 2017-11-20 08:00:02

html片段

  1. 1 <table id="menuview" style="width:100%">
  2. 2 <thead>
  3. 3 <tr>
  4. 4 <th field="ID0" width="5%" fixed="true" checkbox="true"></th>
  5. 5 <th field="TOPIC" width="30%" fixed="true" editor="{type:'validatebox',options:{required:true,missingMessage:'目录名称不能为空。',height:'100px'}}">目录名称</th>
  6. 6 <th field="WJBH" width="10%" fixed="true" editor="text">文件编号</th>
  7. 7 <th field="ARCHUSER" width="10%" fixed="true" editor="text">责任者</th>
  8. 8 <th field="PAGECOUNT" width="5%" fixed="true" editor="numberbox">页数</th>
  9. 9 <th field="YH" width="5%" fixed="true" editor="text">页号</th>
  10. 10 <th field="RQ" width="10%" fixed="true" editor="{ type:'datebox',options:{editable:false}}">日期</th>
  11. 11 <th field="ISSCJNML" width="10%" fixed="true" editor="{ type:'checkbox',options:{on: 1,off:0}}" align="center" formatter="rowCheckBoxFormater">是否生成件内目录</th>
  12. 12 <th field="BZ" width="15%" fixed="true" editor="text">备注</th>
  13. 13 </tr>
  14. 14 </thead>
  15. 15 </table>
复制代码
View Code

javascript 片段

  1. 1 $('#menuview').edatagrid({
  2. 2 idField: 'ID0',//主键
  3. 3 rownumbers: true,//序号
  4. 4 pagination: false,//是否分类
  5. 5 fitColumns: true,//配合列拖动时,禁止列自适应宽度
  6. 6 singleSelect: false, //是否单选,
  7. 7 url: "GetCatalogNew?ARCHGID=" + vARCHGID + "&ISSJ=" + vISSJ,//获取数据url
  8. 8 pageSize: 15,//分页配置
  9. 9 pageList: [15, 30, 45, 60],//分页配置
  10. 10 toolbar: '#tb',//工具
  11. 11 autoSave: false,//是否自动报错
  12. 12 selectOnCheck: true,
  13. 13 checkOnSelect: false,
  14. 14 saveUrl: "CatalogAddYY?ISSJ=" + vISSJ, //新建,都是eadatagrid封装好的,把链接填好就行,点击之后会自动发送json数据包
  15. 15 updateUrl: "CatalogAddYY?ISSJ=" + vISSJ, //保存
  16. 16 destroyUrl: "CatalogAddYY?ISSJ=" + vISSJ, //删除
  17. 17 destroyMsg: {
  18. 18 norecord: { // 在没有记录选择的时候执行
  19. 19 title: '警告',
  20. 20 msg: '没有要删除的记录。'
  21. 21 },
  22. 22 confirm: { // 在选择一行的时候执行
  23. 23 title: '确认',
  24. 24 msg: '您确定要删除吗?'
  25. 25 }
  26. 26 },
  27. 27 onBeforeLoad: function (param) {
  28. 28 },
  29. 29 onLoadSuccess: function (data) {
  30. 30 $(this).datagrid('enableDnd');
  31. 31 },
  32. 32 onLoadError: function () {
  33. 33 },
  34. 34 onDestroy: function (index, row) {
  35. 35 },
  36. 36 onAdd: function (index, row) {
  37. 37 row.ARCHGID = vARCHGID;
  38. 38 },
  39. 39 onBeforeSave: function (index) {
  40. 40 return true;
  41. 41 },
  42. 42 onSave: function (index, row) {
  43. 43 var $datagrid = $('#menuview');
  44. 44 if ($datagrid.data('isSave')) {
  45. 45 //如果需要刷新,保存完后刷新
  46. 46 $datagrid.edatagrid('reload');
  47. 47 $datagrid.removeData('isSave');
  48. 48 }
  49. 49 },
  50. 50 onBeforeDrag: function (row) {
  51. 51 var vSelectRowIndex = $('#menuview').datagrid('getRowIndex', row);//获取选择行索引
  52. 52 var vEditRowIndex = $('#menuview').datagrid('getEditingRowIndexs')//获取编辑行索引
  53. 53 if (vSelectRowIndex == vEditRowIndex) { //防止 编辑行拖动bug
  54. 54 return false;
  55. 55 }
  56. 56 },
  57. 57 //拖拽某行到指定位置后触发
  58. 58 onDrop: function (targetRow, sourceRow, point) {
  59. 59 //获取拖拽后的数据行
  60. 60 var rows = $('#menuview').edatagrid("getRows");
  61. 61 var id0 = "";
  62. 62 var vLength = rows.length;
  63. 63 for (var i = 0; i < vLength; i++) {
  64. 64 id0 += rows[i].ID0 + ",";
  65. 65 }
  66. 66 MaskUtil.mask();
  67. 67 $.post("UpFileOrder?ID0=" + id0 + "&ISSJ=" + vISSJ, function (response) {
  68. 68 $('#menuview').edatagrid("reload");
  69. 69 MaskUtil.unmask();
  70. 70 });
  71. 71 },
  72. 72 toolbar: [{
  73. 73 text: '增加',
  74. 74 iconCls: 'icon-add',
  75. 75 handler: function () {
  76. 76 $('#menuview').edatagrid('addRow');
  77. 77 }
  78. 78 }, {
  79. 79 text: '保存',
  80. 80 iconCls: 'icon-save',
  81. 81 handler: function () {
  82. 82 //标记需要刷新
  83. 83 $('#menuview').data('isSave', true).edatagrid('saveRow');
  84. 84 }
  85. 85 }, {
  86. 86 text: '合并',
  87. 87 iconCls: 'icon-save',
  88. 88 handler: function () {
  89. 89 //标记需要刷新
  90. 90 $('#menuview').data('isSave', true).edatagrid('saveRow');
  91. 91 }
  92. 92 }, {
  93. 93 text: '分割',
  94. 94 iconCls: 'icon-save',
  95. 95 handler: function () {
  96. 96 //标记需要刷新
  97. 97 $('#menuview').data('isSave', true).edatagrid('saveRow');
  98. 98 }
  99. 99 }, '-',
  100. 100
  101. 101 '-', {
  102. 102 text: '删除',
  103. 103 iconCls: 'icon-save',
  104. 104 handler: function () {
  105. 105 delData();
  106. 106 }
  107. 107 }, {
  108. 108 text: '刷新',
  109. 109 iconCls: 'icon-reload',
  110. 110 handler: function () {
  111. 111 $('#menuview').edatagrid('reload');
  112. 112 }
  113. 113 }]
  114. 114 });
  115. 115 });
  116. 116 /*
  117. 117 * datagrid 获取正在编辑状态的行,使用如下:
  118. 118 * $('#id').datagrid('getEditingRowIndexs'); //获取当前datagrid中在编辑状态的行编号列表
  119. 119 */
  120. 120 $.extend($.fn.datagrid.methods, {
  121. 121 getEditingRowIndexs: function (jq) {
  122. 122 var rows = $.data(jq[0], "datagrid").panel.find('.datagrid-row-editing');
  123. 123 var indexs = [];
  124. 124 rows.each(function (i, row) {
  125. 125 var index = row.sectionRowIndex;
  126. 126 if (indexs.indexOf(index) == -1) {
  127. 127 indexs.push(index);
  128. 128 }
  129. 129 });
  130. 130 return indexs;
  131. 131 }
  132. 132 });
复制代码
View Code




回复

使用道具 举报