1. 程式人生 > >jquery easyui datagrid使用,分頁、排序、查詢

jquery easyui datagrid使用,分頁、排序、查詢

天涯孤岸軟體商城,專業的個人網站,.net電子商務商城原始碼,,以及其它原始碼, 歡迎訪問:tyga.tygaweb.com (新)

$('#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');
    }