easyui datagrid client搜索、分页、排序
2023-09-14 09:06:24 时间
easyui datagrid的排序默认是server端排序。能够用sorter实现client排序[2]。client分页可用filter实现[3]。client搜索相同能够用filter实现。
不多说直接上代码:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="keywords" content="jquery,ui,easy,easyui,web"> <meta name="description" content="easyui help you build your web page easily!"> <title>jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> <script type="text/javascript"> $(function(){ $('#tt').datagrid({loadFilter:pagerFilter}).datagrid(); }); function doSearch(){ $('#tt').datagrid({searchValue: $('#search_name').val()}); } function mysort(a,b){ return (a > b ? 1 : -1); } function pagerFilter(data){ if (typeof data.length == 'number' && typeof data.splice == 'function'){ data = { total: data.length, rows: data, originalTotal: data.length } } var dg = $(this); var opts = dg.datagrid('options'); if (!data.originalRows){ data.originalRows = (data.rows); } if (opts.searchValue) { data.currOriginalRows = []; for (var k in data.originalRows) { row = data.originalRows[k]; if(row.name.match(opts.searchValue)) { data.currOriginalRows.push(row); } } data.total = data.currOriginalRows.length; data.originalTotal; } else { data.currOriginalRows = data.originalRows; data.total = data.originalTotal; } var pager = dg.datagrid('getPager'); pager.pagination({ onSelectPage:function(pageNum, pageSize){ opts.pageNumber = pageNum; opts.pageSize = pageSize; pager.pagination('refresh',{ pageNumber:pageNum, pageSize:pageSize }); dg.datagrid('loadData',data); } }); var start = (opts.pageNumber-1)*parseInt(opts.pageSize); var end = start + parseInt(opts.pageSize); data.rows = (data.currOriginalRows.slice(start, end)); return data; } </script> </head> <body> <h1>DataGrid</h1> <table id="tt" title="Column Group" class="easyui-datagrid" style="width:1060px;height:390px" url="data/items7.json" singleSelect="true" iconCls="icon-save" rownumbers="true" pagination="true" toolbar="#tb" remoteSort="false"> <thead> <tr> <th field="name" width="180" align="right" sortable="true" sorter="mysort">name</th> <th field="url" width="680" align="right">url</th> </tr> </thead> </table> <div id="tb" style="padding:3px"> <span>name</span> <input id="search_name" style="line-height:26px;border:1px solid #ccc"> <a href="#" class="easyui-linkbutton" plain="true" onclick="doSearch()">Search</a> </div> </body> </html>
參考:
[1]
http://www.jeasyui.com/tutorial/datagrid/datagrid24.php
[2] http://www.jeasyui.com/tutorial/datagrid/datagrid14.php
[3] http://blog.hiter.org/2013/07/realization-of-easyui-datagrid-paging-at-the-front-desk.html
相关文章
- easyui [第一章]:入门
- 技术汇总:第四章:使用Easyui做三级下拉列表
- 2套后台模板HTML+整套Easyui皮肤组件-后台管理系统模板
- easyUI toolbar中添加select下拉选详解编程语言
- easyUI的onDblClickRow事件总结详解编程语言
- EasyUI DataGrid可编辑单元格详解编程语言
- Easyui datebox单击文本框显示日期选择详解编程语言
- Easyui Datagrid的Rownumber行号显示问题详解编程语言
- EasyUI项目驱动学习详解编程语言
- easyui datagrid自定义操作列详解编程语言
- easyui下拉框选中触发事件详解编程语言
- 简单使用EasyUI使MySQL更便捷(easyuimysql)
- 在次封装easyui-Dialog插件实现代码
- Jquery插件easyUi表单验证提交(示例代码)
- Jqurey实现类似EasyUI的页面布局可改变左右的宽度