easyui datagrid 客户端搜索、分页、排序

最新推荐文章于 2023-06-16 21:47:50 发布

junglezax

最新推荐文章于 2023-06-16 21:47:50 发布

阅读量3.1k

点赞数 1

文章标签： easyui datagrid client-side searchin 客户端搜索客户端分页

本文链接：https://blog.csdn.net/junglezax/article/details/34842653

版权

easyui datagrid的排序默认是服务器端排序，可以用sorter实现客户端排序[2]；客户端分页可用filter实现[3]；客户端搜索同样可以用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" οnclick="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

junglezax

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
easyui datagrid 客户端搜索、分页、排序

easyui datagrid的排序默认是服务器端排序，可以用sorter实现客户端排序[2]；客户端分页可用filter实现[3]；客户端搜索同样可以用filter实现。
复制链接

扫一扫