easyUI簡單功能demo
阿新 • • 發佈：2018-12-11
用了easyui有一段時間了，一直沒有對其功能做一個簡單的記錄，今天有點時間，做一下簡單的記錄，以備不時之需。
查詢列表
<body class="easyui-layout" style="padding:5px;left: 0px; top: 4px; "> <div region="center" style="overflow:hidden;background:#fafafa; border:1px"> <!-------------------------------詳細資訊展示表格-----------------------------------> <table id="dataGrid" title="網格員列表" pageSize=20 toolbar="#toolbarCustomer" pagination="true" rownumbers="true" striped="true" fitColumns="true" fit="true" singleSelect="true"> <thead> <tr> <th data-options="field:'gridLevel',width:20" formatter="formatLevel">網格級別</th> <th data-options="field:'name',width:20">網格名稱</th> <th data-options="field:'status',width:20" formatter="formatStatus">狀態</th> </tr> </thead> </table> </div> </div>
展示列表資訊的table 放在了一個div中，region="center" 這個是必須有的一個容器，但是這個容器不一定放的是展示列表，不過習慣上‘’列表展示‘’就放在這個容器中。此外，除了region="center" 還有region="north"，region="south"，region="east"，region="west"，其實 這個是跟easyui的佈局器一起使用的，上北下南左西右東，比如region="north" 那麼這個模組就會在當前佈局器的上邊的部分顯示。
當然，只完成上邊的部分是不行的，還需要有一些js程式碼
$(function(){ $("#dataGrid").datagrid({idField: 'id'}); });
說實話，不知道這麼寫的具體作用是啥，但是不寫的話，頁面就跑偏了。此外，如果gridTable的th裡寫了formatter="***"，那麼，也必須吧***對應的方法寫上才能正常顯示。
再加一個查詢方法吧
function bindSearchEvent(){ $("#dataGrid").datagrid('options').url = "${ctx}/keyItem/dataGrid"; var name = $("#name").val().replace(/\s+/g,""); var params = { 'name':name }; $("#dataGrid").datagrid({idField: 'id', queryParams: params}); $("#dataGrid").datagrid('clearSelections'); }
插入一行列表資料
$('#dataGrid3').datagrid('insertRow',{
index: i, // 索引從0開始
row: {
seq : i,
name: name,
type: type,
path:path
}
});seq、name、type、path都是對應的要展示的欄位，比如<th data-options="field:'name',width:20">網格名稱</th> 中的field:'name'，這個name就是要展示的欄位
刪除一行列表資料
var index = $('#dataGrid3').datagrid('getRowIndex', $("#dataGrid3").datagrid('getSelected'));
$("#dataGrid3").datagrid("deleteRow",index);建立一個下拉樹
$('#checkType').combotree({
url: '${ctx}/gridman/checkType',
multiple: true,
required: true
});
var checkType = '${obj.checkType}';//獲取所有要選中的id
var c = checkType.split(",");
$("#checkType").combotree('setValues',c); //設定選中
請求的url返回json型別的資料，最下邊的三行是讓頁面載入之後 你原來勾選的選項就自動選中（跟我自己的業務邏輯相關的）