- toolbar頭部工具欄
<script type="text/javascript">
$(function () {
$("#datagrid").datagrid({
url: "<%=homePage%>/testController/datagrid.ajax?type=list",
title: "標題",
iconCls: "icon-save",
pagination: true,
pageSize: 10,
pageList: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
fit: true,
fitColumns: true,//列少的時候,設置為true比較合適
nowrap: false,//false - 單元格數據多的時候進行折行 true - 不管數據有多少,都在一行顯示
border: false,
idField: "id",
sortName: "id",
sortOrder: "desc",
columns: [
[
{field: "id", title: "編號", width: 100}
, {field: "name", title: "姓名", width: 100, sortable: true, order: "desc"}
, {field: "password", title: "密碼", width: 100}
]
],
toolbar: [
{
iconCls: "icon-add"
, text: "新增"
, handler: function () {
console.log("新增");
}
}, {
iconCls: "icon-remove"
, text: "刪除"
, handler: function () {
console.log("刪除");
}
}, {
iconCls: "icon-edit"
, text: "編輯"
, handler: function () {
console.log("編輯");
}
}, {
iconCls: "icon-search"
, text: "查詢"
, handler: function () {
console.log("查詢");
}
}
]
}); })
</script>
toolbar屬性，用於設置頭部工具欄，效果如下：
但是查詢其實不應該做在toolbar上，因為toolbar只能添加按鈕，而查詢是需要查詢提交的
有兩種方式
1、在DataGrid組件的上方建立一個<div>,提供一個表單，用於發送查詢參數
2、重寫toolbar
toolbar: "#toolbar"
toolbar屬性值不再是一個數組，而是一個選擇器，在選擇器指定的目標中，我們重寫按鈕如下
<div id="toolbar">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">新增</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">刪除</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">修改</a>
<a href="#" id="searchbtn" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true">查詢</a>
<form id="searchForm">
<table>
<tr>
<th>姓名</th>
<td>
<input name="username" type="text"/>
</td>
</tr>
</table>
</form>
</div>
效果圖
實現查詢功能
$("#searchbtn").click(function(){
console.log("查詢");
var searchForm = $("#searchForm").serialize();
console.log("查詢條件:"+searchForm);//把這個參數用ajax發送,或者表單提交,然后刷新網格就能夠實現查詢
});
個人喜歡另一種方式：將數據表格和查詢部分放在同一個layout中，一個是center，一個是north，north作為查詢部分，一般默認會是隱藏狀態的
完整的前端代碼如下：
<body class="easyui-layout">
<div data-options="region:'north',title:'查詢'" border="false" style="height: 100px" class="datagrid-toolbar">
<form id="schForm" method="post">
<table>
<tr>
<th>姓名</th>
<td>
<input type="text" name="username"/>
</td>
</tr>
<tr>
<th>時間段</th>
<td>
<input name="startTime" class="easyui-datetimebox" editable="false"/>
---
<input name="endTime" class="easyui-datetimebox" editable="false"/>
<a href="#" id="schbt" class="easyui-linkbutton">查詢</a>
<a href="#" id="rstbt" class="easyui-linkbutton">重置</a>
</td>
</tr>
</table>
</form>
</div>
<div data-options="region:'center'" fit="true" border="false">
<table id="datagrid"></table>
</div>
</body>
//默認不顯示查詢條件
$("body").layout('collapse', 'north');
$("#schbt").click(function () {
console.log("查詢");
//這個方法可以封裝起來
var v1 = $("#schForm").serialize();
v1 = decodeURIComponent(v1, true);//解決序列化后的亂碼問題
console.log("v1:" + v1);
var string = v1.split('&');
var res = {};
for (var i = 0; i < string.length; i++) {
var str = string[i].split('=');
console.log(str);
res[str[0]] = str[1];
}
console.log(res);
$("#datagrid").datagrid("load", res);
});
$("#rstbt").click(function () {
console.log("重置");//將Form中的數據清空即可
})
- 表單重置
$("#rstbt").click(function () {
console.log("重置");//將Form中的數據清空即可
$("#schForm :input")
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
})