EasyUI DataGrid 使用（分页，url数据获取，data转json）

EasyUI算是比较有名的，搜一下网上的资料也比较多，具体的参数，下载地址我就不写了

平常也不怎么写文章，大部分都是代码，有不能运行的可以直接评论回复

有可能遇到的问题：

json数据格式，这个要仔细对下，有错误的话无法正常显示数据

分页的原理：

向后台传递页数、和每页显示的条数，然后用sql语句取出对应的数据，转换为json字符串传到前台

 

首先，页面视图代码

<script type="text/javascript" src="~/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.easyui.min.js"></script>

<link rel="stylesheet" href="~/Scripts/easyui.css" type="text/css" />
<link rel="stylesheet" href="~/Scripts/icon.css" type="text/css" />




<table id="test" class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
            >
        <thead>
            <tr>
                
                <th data-options="field:'GameID',width:100">Product</th>   
                <th data-options="field:'GameName',width:80,align:'right'">List Price</th>
                <th data-options="field:'CompanyName',width:80,align:'right'">Unit Cost</th>
                
            </tr>
        </thead>
    </table>

<script>
    $('#test').datagrid({
        url: 'GetGridData',
        pagination: true,//分页控件 
        rownumbers: true,//行号 
        frozenColumns: [[
            { field: 'ck', checkbox: true }
        ]],
        toolbar: [{
            text: '添加',
            iconCls: 'icon-add',
            handler: function () {
                openDialog("add_dialog", "add");
            }
        }, '-', {
            text: '修改',
            iconCls: 'icon-edit',
            handler: function () {
                openDialog("add_dialog", "edit");
            }
        }, '-', {
            text: '删除',
            iconCls: 'icon-remove',
            handler: function () {
                delAppInfo();
            }
        }],
        pageSize: 10,        //设置默认分页大小
        pageList: [10, 15, 20, 25, 30, 35, 40, 45, 50],   //设置分页大小
    });

    
var p = $('#test').datagrid('getPager');
    $(p).pagination({
        pageSize: 10,//每页显示的记录条数，默认为10 
        pageList: [5, 10, 15],//可以设置每页记录条数的列表 
        beforePageText: '第',//页数文本框前显示的汉字 
        afterPageText: '页    共 11 页',
        displayMsg: '当前显示 1 - 11 条记录   共 11 条记录',
        onBeforeRefresh:function(){
            $(this).pagination('loading');
            alert('before refresh');
            $(this).pagination('loaded');
        },
        onChangePageSize: function () {
            alert("pagesized changed");
        }
    });

</script>

 

//分页sql

//datagrid分页数据格式,sortname为按照哪一个字段排序，
        //sortorder为desc、asc，startRecord为第几页，maxRecords为每页显示多少条
        public DataTable GetDataSetBySQL(string sql, string sortname, string sortorder, int startRecord, int maxRecords)
        {

            DataSet ds = new DataSet();

            int staRecord = (startRecord - 1) * maxRecords + 1;
            int endRecord = (startRecord) * maxRecords + 1;

               

            sql = "SELECT * FROM ( SELECT __tmp.*,ROW_NUMBER() OVER (ORDER BY __tmp." + sortname + " " + sortorder + ") AS RowNo FROM (" + sql;
            sql += ") AS __tmp ) AS __tmplist WHERE RowNo>=" + staRecord + " and RowNo<" + endRecord + " ORDER BY RowNo ";

            DataTable dt=db.GetDataSet(sql,"d1");
            
           
            return dt;
        }

接下来是把datatable转换成datagrid需要的json数据格式

//datagrid需要的json数据格式,count为sql总的条数
        public string DataTableToJson(DataTable dt,int count)
        {
            StringBuilder jsonBuilder = new StringBuilder();
            jsonBuilder.Append("{\"");
            jsonBuilder.Append("total\":");
            jsonBuilder.Append(count);
            jsonBuilder.Append(",");
            jsonBuilder.Append("\"rows\"");
            jsonBuilder.Append(":[");

            for (int i = 0; i < dt.Rows.Count; i++)
            {
                jsonBuilder.Append("{");
                for (int j = 0; j < dt.Columns.Count; j++)
                {
                    jsonBuilder.Append("\"");
                    jsonBuilder.Append(dt.Columns[j].ColumnName);
                    jsonBuilder.Append("\":");
                    
                    jsonBuilder.Append("\"");
                    jsonBuilder.Append(dt.Rows[i][j].ToString());
                    jsonBuilder.Append("\"");
                    
                    jsonBuilder.Append(",");
                    //jsonBuilder.Append("\",");
                }
                jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
                jsonBuilder.Append("},");
            }
            jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
            jsonBuilder.Append("]");
            jsonBuilder.Append("}");
            return jsonBuilder.ToString();
        }

最后是获取数据的url代码

 //rows为每页多少条数据，page为当前页数，datagrid空间post传过来的，直接接收即可
        //一个两种方法获取page和rows
        public string GetGridData(string rows,string page)
        {
            int pageSize = Convert.ToInt32(Request["rows"]);
            int pageNum = Convert.ToInt32(Request["page"]);
            //result为json数据格式测试
            string result = "{\"total\":11,\"rows\":[{\"productid\":\"FI-SW-01\",\"productname\":\"Koi\",\"unitcost\":10.00,\"status\":\"P\",\"listprice\":36.50,\"attr1\":\"Large\",\"itemid\":\"EST-1\"}";
            result += ",{\"productid\":\"AV-CB-01\",\"productname\":\"Amazon Parrot\",\"unitcost\":92.00,\"status\":\"P\",\"listprice\":63.50,\"attr1\":\"Adult Male\",\"itemid\":\"EST-18\"}";
            result += ",{\"productid\":\"AV-CB-01\",\"productname\":\"Amazon Parrot\",\"unitcost\":92.00,\"status\":\"P\",\"listprice\":63.50,\"attr1\":\"Adult Male\",\"itemid\":\"EST-18\"}";
            result += ",{\"productid\":\"AV-CB-01\",\"productname\":\"Amazon Parrot\",\"unitcost\":92.00,\"status\":\"P\",\"listprice\":63.50,\"attr1\":\"Adult Male\",\"itemid\":\"EST-18\"}";
            result += ",{\"productid\":\"AV-CB-01\",\"productname\":\"Amazon Parrot\",\"unitcost\":92.00,\"status\":\"P\",\"listprice\":63.50,\"attr1\":\"Adult Male\",\"itemid\":\"EST-18\"}";
            result += ",{\"productid\":\"AV-CB-01\",\"productname\":\"Amazon Parrot\",\"unitcost\":92.00,\"status\":\"P\",\"listprice\":63.50,\"attr1\":\"Adult Male\",\"itemid\":\"EST-18\"}";
            result += ",{\"productid\":\"AV-CB-01\",\"productname\":\"Amazon Parrot\",\"unitcost\":92.00,\"status\":\"P\",\"listprice\":63.50,\"attr1\":\"Adult Male\",\"itemid\":\"EST-18\"}";
            result += ",{\"productid\":\"AV-CB-01\",\"productname\":\"Amazon Parrot\",\"unitcost\":92.00,\"status\":\"P\",\"listprice\":63.50,\"attr1\":\"Adult Male\",\"itemid\":\"EST-18\"}";
            result += ",{\"productid\":\"AV-CB-01\",\"productname\":\"Amazon Parrot\",\"unitcost\":92.00,\"status\":\"P\",\"listprice\":63.50,\"attr1\":\"Adult Male\",\"itemid\":\"EST-18\"}";
            result += ",{\"productid\":\"AV-CB-01\",\"productname\":\"Amazon Parrot\",\"unitcost\":92.00,\"status\":\"P\",\"listprice\":63.50,\"attr1\":\"Adult Male\",\"itemid\":\"EST-18\"}";
            result += ",{\"productid\":\"AV-CB-01\",\"productname\":\"Amazon Parrot\",\"unitcost\":92.00,\"status\":\"P\",\"listprice\":63.50,\"attr1\":\"Adult Male\",\"itemid\":\"EST-18\"}";
            result += ",{\"productid\":\"AV-CB-01\",\"productname\":\"Amazon Parrot\",\"unitcost\":92.00,\"status\":\"P\",\"listprice\":63.50,\"attr1\":\"Adult Male\",\"itemid\":\"EST-18\"}]}";
            //return Json(result,JsonRequestBehavior.AllowGet);

            string sql = "select a.GameID,a.GameName,b.CompanyName from GameProfile a LEFT JOIN CompanyProfile b ON a.CompanyId=b.CompanyId";
            string sqlcount = " select count(*) from  GameProfile ";
            DataTable dtrows = db.GetDataSet(sqlcount, "count");
            int record = Convert.ToInt32(dtrows.Rows[0][0].ToString());
            DataTable dt = GetDataSetBySQL(sql, "gameid", "desc",Convert.ToInt32(page),Convert.ToInt32(rows));
            string result2 = DataTableToJson(dt,record);
            return result2;
        }

 

转载于:https://www.cnblogs.com/lovejunjuan/p/5680641.html