jquery easyui使用(三)······datagrid加载数据(已解决)
<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中报如下错误:


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

替代方案
前端页面:
<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,真够粗心的。。。
jquery easyui使用(三)······datagrid加载数据(已解决)的更多相关文章
- jquery easyui easyui-treegrid 使用异步加载数据
jquery easyui easyui-treegrid 使用异步加载数据 jquery easyui easyui-treegrid 异步请求 >>>>>>&g ...
- 解决easyui datagrid加载数据时,checkbox列没有根据checkbox的值来确定是否选中
背景: 昨天帮朋友做一个easyui datagrid的小实例时,才发现easyui datagrid的checkbox列,没有根据值为true或false来选中checkbox,当时感觉太让人失 ...
- Easyui datagrid加载数据时默认全选的问题
问题描述: 最近使用 Easyui datagrid 展示数据,之前一直使用很正常,今天出现了一个怪异问题 加载数据后,只要点击选中列 ck 的任意行或多行,再刷新时整个datagrid的所有数据都 ...
- jQuery+Ajax滚屏异步加载数据实现(附源码)
一.CSS样式 body { font:12px/1.0em Microsoft Yahei; line-height:1.6em; background:#fff; line-height:1.2e ...
- Android Scrollview嵌套下listView动态加载数据,解决onScrollChanged执行多次数据重复问题
这一篇博客和上一篇讲的都是listView的动态加载,但有所不同的是,本篇的listView是嵌套在ScrollView下的,有时候在一个Activity中可能分为好几个模块,由于展示的需要(手机屏幕 ...
- easyui datagrid加载数据的三种方式
1.加载本地数据 var obj = {"total":2,"rows":[{id:"1",name:"一"},{id: ...
- easyui datagrid加载数据的两种方式
1.加载本地数据 var obj = {"total":2,"rows":[{id:"1",name:"一"},{id: ...
- easyui datagrid加载数据和分页
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding=& ...
- Jquery EasyUI Treegrid按需加载子集
项目说明,要一个有权限并且按需加载的树形列表. jeasyui网址 CSS <!--添加树状控件--> <link rel="stylesheet" type=& ...
随机推荐
- android内部培训视频_第二节 布局基础
第二节:布局入门 一.线性布局 需要掌握的属性: 1.orientation:排列方式 vertical:垂直 Horizontal:水平 2.weight:水平布局的权重 3.gravity:子控件 ...
- js封装用户选项传递给Servlet之考试系统二
<%@ page language="java" import="java.util.*" contentType="text/html; ch ...
- Cygwin/babun install telnet
最近一直在用一个windows下模拟linux的集成环境babun,特点是安装方便,使用简单,而且大部分linux程序都可以找到. 下面说一下telnet的安装: pact install inetu ...
- Sql Server系列:多表连接查询
连接查询是关系数据中最主要的查询,包括内连接.外连接等.通过连接运算符可以实现多个表查询.内连接查询操作列出与连接条件匹配的数据行,它使用比较运算符比较被连接列的列值.SQL Server中的内连接有 ...
- [C#]想说一说嵌套数组
今天早上,随感而发,随便写了点东西.结果下午的时候看了看评论,吓我一跳.估计是不是写代码的人看散文看得太少了,还是因为现在的人读的书太少了,似乎有有些大惊小怪. 关于Y美女,我声明一下,尽管她很脱俗, ...
- jQuery 2.0.3 源码分析 事件绑定 - bind/live/delegate/on
事件(Event)是JavaScript应用跳动的心脏,通过使用JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应 事件的基础就不重复讲解了,本来是定位源码分析 ...
- ueditor的配置和使用
ueditor下载好之后直接复制到项目的WebContent目录下,并将ueditor\jsp\lib下的jar包复制或者剪切到项目的lib目录下.先看一下效果,如下: 1.文件的上传 首先在uedi ...
- jsp通过易宝方式实现在线支付
项目下载地址: https://github.com/hjzgg/OnlinePayment 参考:http://blog.csdn.net/jadyer/article/details/738025 ...
- Hibernate学习之hibernate.cfg.xml
<?xml version='1.0' encoding='UTF-8'?> <!DOCTYPE hibernate-configuration PUBLIC "-//Hi ...
- Java设计模式之建造者模式(Builder)
前言: 最近一直在学习okHttp,也对其做了一些整理,okHttp和Retrofit结合大大加速我们的开发效率,源码里面采用了很多设计模式,今天我们来学习一下其中的设计模式之一建造者模式. 建造者模 ...