easyui 點選左邊字典型別右邊顯示詳細資訊。
阿新 • • 發佈：2018-12-18
1：html
<body> <div class="easyui-layout" style="width:100%;height:100%;"> <div id="p" data-options="region:'west'" style="width: 600px"> <div id="g" style="width: 100%;height: 100%"> <div class="easyui-panel" data-options="fit:true,border:false"> <div class="easyui-layout" data-options="fit:true"> <div data-options="region:'center'"> <table id="dictionaryGrid" title="資料字典型別" style="width:100%;height:554px" data-options=" singleSelect:false, autoRowHeight:false, pagination:true, fitColumns:true, striped:true, checkOnSelect:false, selectOnCheck:false, collapsible:true, toolbar:'#tb', pageSize:10"></table> </div> </div> </div> </div> </div> <div id="p" data-options="region:'center'" style="width: 590px"> <div id="g1" style="width: 100%;height: 100%"> <div class="easyui-panel" data-options="fit:true,border:false"> <div class="easyui-layout" data-options="fit:true"> <div data-options="region:'center'"> <table id="dictionarySonGrid" title="資料字典明細" style="width:100%;height:554px" data-options=" singleSelect:false, autoRowHeight:false, pagination:true, fitColumns:true, striped:true, checkOnSelect:false, selectOnCheck:false, collapsible:true, toolbar:'#tb', pageSize:10"></table> </div> </div> </div> </div> </div> </div> </body>
2:js
<script> $('#tableId').datagrid({ }); var dictionarySonGrid; var dictionaryGrid; $(document).ready(function() { dictionaryGrid = $('#dictionaryGrid').datagrid( $.extend({ url: '${ct}/businessConsole/dictionary/dataGrid.do', idField: 'DICCD', singleSelect: true, onClickRow: function(index, row) { var select = $('#dictionaryGrid').datagrid('getChecked'); //獲取選中的行 if(select && 1 == select.length) { var dictionarySonGrid = $('#dictionarySonGrid').datagrid( $.extend({ url: '${ct}/businessConsole/dictionary/datilsByParentid.do?parentid=' + select[0].DICCD, idField: 'DICCD', singleSelect: true, frozenColumns: [ [ /* {field : 'DICCD', title : 'DICCD', checkbox : true} */ ] ], columns: [ [ { field: 'DICCD', title: 'DIC_CD', width: 100, hidden: true }, { field: 'parentid', title: 'ParentId', width: 100, height: 30, hidden: true }, { field: 'DICTitle', title: '字典名稱', width: 100, height: 30, }, { field: 'DICCode', title: '編碼', width: 100, height: 30, }, { field: 'DICValue', title: 'DICValue', width: 100, hidden: true }, { field: 'DICNote', title: 'DIC_Note', width: 100, hidden: true }, { field: 'DICOther', title: 'DIC_Other', width: 100, hidden: true }, { field: 'sortcode', title: 'SortCode', width: 100, hidden: true }, { field: 'createdate', title: 'CreateDate', width: 100, hidden: true }, { field: 'createuserid', title: 'CreateUserId', width: 100, hidden: true }, { field: 'createusername', title: 'CreateUserName', width: 100, hidden: true }, { field: 'modifydate', title: 'ModifyDate', width: 100, hidden: true }, { field: 'modifyuserid', title: 'modifyUserId', width: 100, hidden: true }, { field: 'modifyusername', title: 'modifyUserName', width: 100, hidden: true }, { field: 'lrsj', title: 'lrSj', width: 100, hidden: true }, { field: 'lrrydm', title: 'lrryDm', width: 100, hidden: true } ] ], toolbar: [{ iconCls: 'icon-add', text: '新增字典', handler: function() { addDialog(); } }, { iconCls: 'icon-edit', text: '修改字典', handler: function() { editRightDictionary(); } }, { iconCls: 'icon-remove', text: '刪除字典', handler: function() { deletedictionaryright(); } } ] }, ns.datagridOptions)); </script>