你的位置:首页 > Java教程

[Java教程]easyUI datagrid editor扩展dialog


easyUI datagrid简单使用:着重两点1、editor对象的click事件;2、将dialog窗体内的值填写到当前正编辑的单元格内

 1 <!DOCTYPE html> 2 <html ="http://www.w3.org/1999/xhtml"> 3 <head> 4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5   <title></title> 6   <link href="css/easyui.css" rel="stylesheet" /> 7   <link href="css/icon.css" rel="stylesheet" /> 8   <link href="css/demo.css" rel="stylesheet" /> 9   <script src="js/jquery.min.js"></script> 10   <script src="js/jquery.easyui.min.js"></script> 11 </head> 12 <body> 13   <!--datagrid--> 14   <table id="dg"></table> 15   <!--dialog--> 16   <div id="dd"> 17     <input type="text" id="txt" /> 18   </div> 19   <script type="text/javascript"> 20     var columns = [[ 21       { field: 'A', title: 'A', width: 100, rowspan: 2 }, 22       { title: 'B', colspan: 3 }, 23       { title: 'C', colspan: 3 } 24     ], [ 25       { 26         field: 'a', title: 'a', width: 100, editor: { 27           type: 'textbox', 28           options: { 29             required: true, 30             missingMessage: '*必填*' 31           } 32         } 33       }, 34       { 35         field: 'b', title: 'b', width: 100, editor: { 36           type: 'datebox' 37         } 38       }, 39       { 40         field: 'c', title: 'c', width: 100, editor: { 41           type: 'combobox', 42           options: { 43             data: [{ value: 'cc', text: 'cc' }, { value: 'ccc', text: 'ccc' }], 44             panelHeight: 'auto' 45           } 46         } 47       }, 48       { 49         field: 'd', title: 'd', width: 100, editor: { 50           type: 'numberbox', 51           options: { precision: 1 } 52         } 53       }, 54       { field: 'e', title: 'e', width: 100, editor: { type: 'checkbox', options: { on: '1', off: '0' } } }, 55        { 56          field: 'f', title: 'f', width: 100, editor: { 57            type: 'dialog', 58            options: { 59              dlgId: 'dd', 60              textId: 'txt', 61              currField: 'f' 62            } 63          } 64        } 65     ]]; 66     var data = [{ A: 'A', a: 'a', b: 'b', c: 'c', d: 'd', e: 'e', f: 'f' }]; 67     $(function () { 68       //初始化弹窗 69       $('#dd').dialog({ 70         title: '弹窗', 71         width: 400, 72         height: 'auto', 73         closed: true, 74         cache: false, 75         modal: true, 76         buttons: [{ 77           text: '保存', 78           handler: function () { 79             var index = editIndex; 80             var cellEditor = $('#dg').datagrid('getEditor', { index: index, field: editField }); 81             cellEditor.actions.setValue(cellEditor.target, $('#txt').val()); 82             $('#dd').dialog('close'); 83           } 84         }, { 85           text: '取消', 86           handler: function () { 87             $('#dd').dialog('close'); 88           } 89         }] 90       }); 91       //初始化表格 92       $('#dg').datagrid({ 93         data: data, 94         title: '对账报告- PA02', 95         iconCls: 'icon-title', 96         width: 650, 97         height: 'auto', 98         singleSelect: true, 99         fitColumns: false,100         columns: columns,101         rownumbers: true,102         showFooter: true,103         pagination: true,//分页控件104         fit: true,//自动大小105         border: true,106         onLoadSuccess: onLoadSuccess,107         toolbar: [{108           text: '添加',109           iconCls: 'icon-add',110           handler: function () {111             editCell = false;112             if ($('#dg').datagrid('validateRow', editIndex)) {113               $('#dg').datagrid('endEdit', editIndex);114               $('#dg').datagrid('appendRow', {});115               $('#dg').datagrid('selectRow', editIndex + 1).datagrid('beginEdit', editIndex + 1);116               editIndex = editIndex + 1;117             }118           }119         }]120       });121       //设置分页控件122       var p = $('#dg').datagrid('getPager');123       $(p).pagination({124         pageSize: 10,//每页显示的记录条数,默认为10125         pageList: [5, 10, 15],//可以设置每页记录条数的列表126         beforePageText: '第',//页数文本框前显示的汉字127         showRefresh: false,128         afterPageText: '页  共 {pages} 页',129         displayMsg: '<span ></span>当前显示 {from} - {to} 条记录  共 {total} 条记录'130       });131     });132     var editIndex = -1;//标识编辑行133     var editField;//正在编辑的单元格所属字段134     function onLoadSuccess() {135       editIndex = $('#dg').datagrid('getRows').length - 1;136     }137     //重写editor,添加弹出框类型138     $.extend($.fn.datagrid.defaults.editors, {139       dialog: {140         init: function (container, options) {141           var editor = $('<input type="text"/>').appendTo(container);142           editor.textbox(options);143           container.click(function () {144             $('#' + options['dlgId']).dialog('open');145             editField = options['currField'];146           });147           return editor;148         },149         getValue: function (target) {150           return $(target).textbox('getValue', $(target).val());151         },152         setValue: function (target, value) {153           if (value)154             $(target).textbox('setValue', value);155           else156             $(target).textbox('setValue', '');157         },158         resize: function (target, width) {159           $(target).textbox('resize', width);160         },161         destroy: function (target) {162           $(target).textbox('destroy');163         }164       }165     });166   </script>167 </body>168 </html>

easyUI datagrid

页码导航栏pagination,在此处代码中与datagrid分开初始化,自定义了pagination,会导致初始页面加载两次,其原因是第一次表格加载取得总记录数total,和页码栏total值不相等,那么easyui会重新发一次请求,解决办法是可以注释掉源码中再次请求的代码

1097//if(_b3.total==0){1098//_b3.pageNumber=0;1099//_b4=0;1100//}

但是还有解决办法,注释掉下面代码,没有测试呢

if(_615.total!=data.total){_614.pagination("refresh",{total:data.total});if(opts.pageNumber!=_615.pageNumber){opts.pageNumber=_615.pageNumber;_5d7(_60f);}}