欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jquery easyui使用(三)······datagrid加载数据(已解决)

程序员文章站 2024-02-03 20:54:40
...
<div id="table_Data">
        </div>
$("#table_Data").datagrid({
    toolbar: '#myToolbar',
    url: urlAshx,
    queryParams: { "action": "carlist" },
    method: 'post',
    width: 'auto',
    height: '500px',
    iconCls: 'icon-edit',
    singleSelect: true,
    fitColumns: false,
    pagination: true,
    pageSize: 15,
    pageList: [15, 25, 35, 45],
    pageNumber: 1,
    rownumbers: true,
    loadMsg: "正在加载数据...",
    columns: [[
        { filed: 'ID', title: '编号', width: 120, hidden: true },
        { filed: 'Name', title: '车辆名称', width: "120", align: 'center' },
        { filed: 'Type', title: '型号', width: 120, align: 'center' },
        { filed: 'LicenseTag', title: '牌号', width: 120, align: 'center' },
        { filed: 'Color', title: '座位数', width: 120, align: 'center' },
        { filed: 'Seats', title: '颜色', width: 120, align: 'center' },
        { filed: 'Remarks', title: '备注', width: 920, align: 'center' },
        {
            filed: 'Action', title: '操作', width: 550, align: 'center', formatter: function (value, row, index) {
                alert(row.Name);
                var Action = "<a href='javascript:void(0);' onclick='Edit("   row.ID   ")'>修改</a>\
javascript:void(0);' onclick='Delete("   row.ID   ")'>删除</a>";
                return Action;
            }
        }
    ]],
    onLoadSuccess: function (data) { alert("success"); },
    onLoadError: function (XMLHttpRequest, textStatus, errorThrown) { alert("error"); },
    onBeforeEdit: function (index, row) { },
    onAfterEdit: function (index, row) { },
    onCancelEdit: function (index, row) { }
});

 

private string GetCarList(HttpContext context)
{
    string result = "";
    DataTable dt = bll_cmCar.GetAllList().Tables[0];
    if (dt != null && dt.Rows.Count > 0)
    {
        int total = dt.Rows.Count;
        string json = Common.DataTableConvertJson.DataTableToJson(dt);
        result = "{\"total\":"   total   ",\"rows\":"   json   "}";
        //result = json ;
    }
    return result;
}

 返回的数据格式正确,在IE中报如下错误:

jquery easyui使用(三)······datagrid加载数据(已解决)

jquery easyui使用(三)······datagrid加载数据(已解决)

给这两个错误加上判断col!=null,倒是不报错了,但是结果还是显示不出来,求大神指教

jquery easyui使用(三)······datagrid加载数据(已解决)

替代方案

前端页面:

<table id="table_Data" class="easyui-datagrid" title=""
    data-options="singleSelect:true,collapsible:true,url:'ashx/Car.ashx',method:'post',queryParams: { 'action': 'carlist' },toolbar: '#myToolbar',height: '500px',width: 'auto',iconCls: 'icon-edit',fitColumns: false,pagination: true,pageSize: 15,pageList: [15, 25, 35, 45],pageNumber: 1,rownumbers: true,loadMsg: '正在加载数据...',">
    <thead>
        <tr>
            <th data-options="field:'ID',width:80, hidden: true">ID</th>
            <th data-options="field:'Name',width:100,align:'center'">Name</th>
            <th data-options="field:'Type',width:80,align:'center'">Type</th>
            <th data-options="field:'LicenseTag',width:80,align:'center'">LicenseTag</th>
            <th data-options="field:'Color',width:50,align:'center'">Color</th>
            <th data-options="field:'Seats',width:60,align:'center'">Seats</th>
            <th data-options="field:'Remarks',width:250,align:'center'">Remarks</th>
        </tr>
    </thead>
</table>

 找到原因了

$("#table_Data").datagrid({
    toolbar: '#myToolbar',
    url: urlAshx,
    queryParams: { "action": "carlist" },
    method: 'post',
    width: 'auto',
    height: '500px',
    iconCls: 'icon-edit',
    singleSelect: true,
    fitColumns: false,
    pagination: true,
    pageSize: 15,
    pageList: [15, 25, 35, 45],
    pageNumber: 1,
    rownumbers: true,
    loadMsg: "正在加载数据...",
    columns: [[
        { field: 'ID', title: '编号', width: 120, hidden: true },
        { field: 'Name', title: '车辆名称', width: "120", align: 'center' },
        { field: 'Type', title: '型号', width: 120, align: 'center' },
        { field: 'LicenseTag', title: '牌号', width: 120, align: 'center' },
        { field: 'Color', title: '座位数', width: 120, align: 'center' },
        { field: 'Seats', title: '颜色', width: 120, align: 'center' },
        { field: 'Remarks', title: '备注', width: 920, align: 'center' },
        {
            field: 'Action', title: '操作', width: 550, align: 'center', formatter: function (value, row, index) {
                alert(row.Name);
                var Action = "<a href='javascript:void(0);' onclick='Edit("   row.ID   ")'>修改</a>\
javascript:void(0);' onclick='Delete("   row.ID   ")'>删除</a>";
                return Action;
            }
        }
    ]],
    onLoadSuccess: function (data) { alert("success"); },
    onLoadError: function (XMLHttpRequest, textStatus, errorThrown) { alert("error"); },
    onBeforeEdit: function (index, row) { },
    onAfterEdit: function (index, row) { },
    onCancelEdit: function (index, row) { }
});

 原因:columns: [[]]里面的field字段写成了filed,真够粗心的。。。


更多专业前端知识,请上【猿2048】www.mk2048.com