Datagrid加载后台数据的方式介绍

【前言】

最近在开发库房系统，经常遇到easyui datagrid数据加载，但是发现加载数据有两种不同的方式，一种是ajax加载目标url返回的json数据；另一种是在加js对象,通过loadData方法（或者可以在js里创建datagrid，这样就不用loadData方法了）。

通过ajax 加载数据

在view 里设置好表格样式：

 <table class="easyui-datagrid" title="我的申请" style="width: 750px; height: 250px"data-options="
              singleSelect:true,     @*设置为 true，则只允许选中一行。*@
              collapsible:true,
              rownumbers:true,      @*设置为 true，则显示带有行号的列。*@
              autoRowHeight:false,
              pagination:true,      @*设置为 true，则在数据网格（datagrid）底部显示分页工具栏。*@
              pageSize:20">
        <thead>

            <tr>

                <th data-options="field:'ItemNo',halign:'center'">物品编号</th>
                <th data-options="field:'ItemName',halign:'center'">商品名称</th>
                <th data-options="field:'CategoryID',halign:'center'">商品类别</th>
                <th data-options="field:'Number',halign:'center'">借用数量</th>
                <th data-options="field:'Purpose',halign:'center'">用途</th>
                <th data-options="field:'Operator1',halign:'center'">审批人</th>
                <th data-options="field:'LendingDate',width:80,halign:'center'">借用时间</th>
                <th data-options="field:'ReturnDate',width:80,halign:'center'">归还时间</th>
                <th data-options="field:'OperationItem',halign:'center'">操作列</th>
              @*  <th data-options="field：'Status',halign:'center'">状态</th>*@

            </tr>
        </thead>
    </table>

用ajax 进行数据传输，从服务器获取数据，把获得的数据放到以表格列id的数组里，然后再把数据加载到表格中进行数据填充。

//ready方法为文档加载时就发生
$(document).ready(function () {
    //绑定搜索事件
    $('#btn_Search').bind('click', search_click);

    $.ajax({

        //类型为get，是要从数据库获取数据，

        type: "GET",

        //获取数据的地址，此地址为对应的controller,去执行对应的controller,MVC里的controller相当于三层中的U层
        url: "/MyApplication/ShowAllApplication",

        //连同请求发送到服务器的数据，请求参数
        data: "&applicant=" + 001,

        //返回的数据类型为json类型
        dataType: "json",

        //当controller 请求服务器成功时执行,参数data为返回的数据
        success: function (data) {
            //定义数组变量，存放着datagrid各列的ID
            var data1 = [{ "itemNo": '', "itemName": '', "categoryName": '', "number": '', "purpose": '', "userName": '', "lendingDate": '', "returnDate": '', "status": '' }]

            //循环向data1里添加数据
            for (var i = 0; i < data.length; i++) {
                data1.push({ "itemNo": data[i].itemNo, "itemName": data[i].ItemName, "categoryName": data[i].categoryName, "number": data[i].number, "purpose": data[i].purpose, "userName": data[i].userName, "lendingDate": data[i].lendingDate, "returnDate": data[i].returnDate, "status": data[i].status })
            }

            //在表格中加载数据，dg是datagrid 的ID
            $('#dg').datagrid("loadData", data1);
        }
    })
})

直接在js里加载数据

通过js里动态加载datagrid控件，数据会自动按照datagrid列colums对象的filed进行填充数据表格。创建easyui datagrid也可以写在view的html里面，这样就需要使用loaddata方法调用js对象加载数据了。

$(document).ready(function () {
   //类型为get，是要从数据库获取数据，

        type: "GET",

        //获取数据的地址，此地址为对应的controller,去执行对应的controller,MVC里的controller相当于三层中的U层
        url: "/MyApplication/ShowAllApplication",

        //连同请求发送到服务器的数据，请求参数
        data: "&applicant=" + 001,

        //返回的数据类型为json类型
        dataType: "json",
$('#dg').datagrid({
   //通过datagrid属性设置表格样式
            width: "100%", //宽度
            striped: true, //把行条纹化（奇偶行背景色不同）
            idField: 'quesID', //标识字段
            loadMsg: '正在加载用户的信息.......', //从远程站点加载数                    据时，显示的提示消息
            pagination: true, //数据网格底部显示分页工具栏
            singleSelect: false, //只允许选中一行
            pageList: [10, 20, 30, 40, 50], //设置每页记录条数的列表
            pageSize: 10, //初始化页面尺寸（默认分页大小）
            pageNumber: 1, //初始化页面（默认显示第一页）
            beforePageText: '第', //页数文本框前显示的汉字 
            afterPageText: '页 共 {pages} 页',
            displayMsg: '第{from}到{to}条，共{total}条',

        //数据网格列数组对象
         columns:[[
             { field: 'ItemNo', title: '商品编号', editor: 'text' },       
             { field: 'ItemName', title: '商品名称', editor: 'text' },
             { field: 'CategoryID', title: '商品类别', editor: 'text' },
             { field: 'Number', title: '借用数量', editor: 'text' },
             { field: 'Purpose', title: '用途', editor: 'text' },
             { field: 'Operator1', title: '审批人', editor: 'text' },
             { field: 'LendingDate', title: '借用时间', editor: 'text' },
             { field: 'ReturnDate', title: '归还时间', editor: 'text' },
             { field: 'OperationItem', title: '操作列', formatter: btnDetailed}           
        ]]
        }）
}）

总结：

当我们有疑问的时候，就一定要查，放到一起比较，不讲就，同时要借鉴文档，看别人的代码（学习的过程），找联系，懂得原理，这样才能掌握到本质。PS:js 与ajax 区别是js：设置动态页面，ajax：主要是实现数据传输。