zoukankan      html  css  js  c++  java
  • easyui datagrid client搜索、分页、排序

    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="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




  • 相关阅读:
    poj 2778 AC自己主动机 + 矩阵高速幂
    Web Services 指南之:Web Services 综述
    SQL多表连接查询(具体实例)
    HibernateUtil
    哈夫曼编码问题再续(下篇)——优先队列求解
    MySQL Merge存储引擎
    程序的入口及AppDelegate窗体显示原理
    几个免费的DNS地址
    kettle与各数据库建立链接的链接字符串
    【转】利用optimize、存储过程和系统表对mysql数据库表进行批量碎片清理释放表空间
  • 原文地址:https://www.cnblogs.com/brucemengbm/p/6805783.html
Copyright © 2011-2022 走看看