【轉】 jquery easyui datagrid使用，分頁、排序、查詢

$('#dg').datagrid({

                url: "xxx.ashx",    
                pagination: true,
                pageSize: 2,
                loadMsg:"正在努力加載數據，請稍后...",
                singleSelect:true,
                pageList: [2, 5, 10, 50],
                columns: [[
                    { field: 'UserName', title: '用戶名', width: 100, sortable: true },
                    { field: 'UserId', title: 'UserId'}
                ]]
            });

點擊排序列，將獲取參數有：page=1&rows=10&sort=UserName&order=desc

<div id="Users-dlg-toolbar" style="padding:2px; text-align:right;">        

<input class="easyui-searchbox" data-options="searcher:searchUser,prompt:'請輸入用戶名'" style="width:150px" />    

</div>

function usersDataGrid() {
        $('#dg').datagrid({
            url: "xxx.ashx",
            pagination: true,
            rownumbers: true,
            loadMsg: "正在努力加載數據，請稍后...",
            columns: [[
                { field: 'UserId', checkbox: true },
                { field: 'UserName', title: '用戶名', width: 100 }
            ]],
            toolbar: '#Users-dlg-toolbar',
            striped: true,
            queryParams: {},
        });

 

  var p = $('#dg').datagrid('getPager');
        $(p).pagination({
            //            pageSize: 10,//每頁顯示的記錄條數，默認為10  
            //            pageList: [5,10,15],//可以設置每頁記錄條數的列表  
            beforePageText: '第', //頁數文本框前顯示的漢字  
            afterPageText: '頁    共 {pages} 頁',
            displayMsg: ''
            //            displayMsg: '當前顯示 {from} - {to} 條記錄   共 {total} 條記錄',  
            /*onBeforeRefresh:function(){ 
            $(this).pagination('loading'); 
            $(this).pagination('loaded'); 
            }*/
        });

 

 

$(function(){

 

$('#dg').datagrid({            
            onSortColumn: function (sort, order) {

              alert("sort:"+sort+",order："+order+"");          

          }  });

})

 

function searchUser(value,name) {
        var queryParams = $('#dg').datagrid('options').queryParams;
        queryParams.name = value;
        $("#dg").datagrid('reload');
    }