- 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中的数据清空即可})
时间： 2024-08-27 00:16:20