数据表格 - DataGrid - 查询
- 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');
})
