easyUI datagrid简单使用：着重两点1、editor对象的click事件；2、将dialog窗体内的值填写到当前正编辑的单元格内 1 <!DOCTYPE html> 2 <html ="http://www.w3.org/1999/xhtm ...
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='/images/loading.gif' data-original="js/jquery.min.js"></script> 10 <script src='/images/loading.gif' data-original="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>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：easyUI datagrid editor扩展dialog
关键词：DataGrid
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
