【转】 jquery easyui datagrid使用，分页、排序、查询

$('#dg').datagrid({

                url: "xxx.ashx",    
                pagination: true,
                pageSize: 2,
                loadMsg:"正在努力加载数据，请稍后...",
                singleSelect:true,
                pageList: [2, 5, 10, 50],
                columns: [[
                    { field: 'UserName', title: '用户名', 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="150px" />    

</div>

function usersDataGrid() {
        $('#dg').datagrid({
            url: "xxx.ashx",
            pagination: true,
            rownumbers: true,
            loadMsg: "正在努力加载数据，请稍后...",
            columns: [[
                { field: 'UserId', checkbox: true },
                { field: 'UserName', title: '用户名', 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');
    }