前几天有人在使用jQuery EasyUI的datagrid时,遇到不会动态绑定列的情况,而网上给出的例子可能也是比较早的处理办法,竟然需要修改easyui源码,其实解决这问题的思路是很简单,我们只需修改要显示的列即可。那位朋友最后改为这种处理时,发现还是有问题,最终我发现她返回不是合法json,里边多个方括号,这里推荐大家使用本站的JSON在线校验格式化工具来验证返回json是否正确。
这里我们以上篇文章中类似的简单json来说明这个问题,比如后台要根据当前用户的权限返回不同的json:
public ActionResult getstudents(int level=0) { List<Student> list = new List<Student>(); list.Add(new Student() { id = 1, name = "小李" }); list.Add(new Student() { id = 2, name = "小王" }); //级别是老师,则可查看学生地址 if (level == 1) { list = new List<Student>(); list.Add(new Student() { id = 1, name = "小李", address = "北京" }); list.Add(new Student() { id = 2, name = "小王", address = "上海" }); } return Json(list, JsonRequestBehavior.AllowGet); }
那么使用easyui datagrid时,页面上有:
<table id="tt" style="width:700px;height:250px"></table>
如果你在table上使用了class="easyui-datagrid"那么你会发现ajax请求了两次,具体查看办法可看看chrome下ajax请求结果。
默认显示列调用:
$(function () { $('#tt').datagrid({ url: '/home/getstudents', columns: [[ { field: 'id', title: '学生ID', width: 80 }, { field: 'name', title: '姓名', width: 120 } ]] }); });
显示结果如下:
那么当老师级别查看的时候,只需要修改下columns即可,后台json返回要加上address列。当然这里的权限我们作为演示是传过去的,真正项目中肯定是要在后台判断的。 分享一个最好用的UI前端框架!
$('#tt').datagrid('options').url = '/home/getstudents?level=1'; $('#tt').datagrid({ columns: [[ { field: 'id', title: '学生ID', width: 80 }, { field: 'name', title: '姓名', width: 120 }, { field: 'address', title: '地址', width: 120 } ]] });
结果如下:
到这我们本篇所提到的问题已得到解决,其实解决思路还是来自easyui的官网,但很多人都没有这个习惯,出了问题不会主动去看官网的说明。当然也有不少朋友都访问不了官网,我这几天发现google的jQuery cdn也不稳定,迫使本人开始使用新浪的jQuery cdn。
相关推荐
jquery easyui demo 网页下载下来打包了,还有datagrid简要说明
jquery easyui 扩展 datagrid 自定义动态隐藏显示列
jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!
easyUI页面datagrid动态列和form字段动态添加;项目开发时用到的,废了不少事,大概总了一下,现在发出来共享给想我一样的要用到的菜鸟们,谢谢
JS EasyUI DataGrid动态加载数据
本文给大家分享jQuery EasyUI编辑DataGrid用combobox实现多级联动效果的实例代码,代码简单易懂,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
jquery easyui datagrid 性能优化,优化后可快速提升查询性能。唯一的缺陷就是不支持可编辑grid了。只需要在引入easyui.js后面引入此js即可。
jquery easyui datagrid demo 详解 增删改查
解决EasyUIdataGrid列比较多,无数据,列展现不全
jqueryEasyUI中的dataGrid实现的表格的增删改查,后台使用servlet,有数据库源码
jquery easyui datagrid 教程的部分应用。
jquery.easyui.datagrid自动合并列扩展,支持多列合并。 用法:加载成功后 $('#'+tab).datagrid("autoMergeCells",['列名','列名']);
两种方法将easyui datagrid 中的数据导出到Excel中,均以验证可以正常使用
JQuery EasyUI DataGrid服务端分页加载数据后,DataGrid行号不能延续,总是重新由1开始。因为服务端分页取回的是单页数据,通过LoadData方法加载数据后,pageNumber属性被初始化为1,因此行号总是重新由1开始。现在...
UI设计在一个系统中的重要性是不容忽视的,我们开发人员要做到:让用户去控制...给你的Easyui-DataGrid 表头添加一点料吧 Easyui-Datagrid—表头灵活显示http://blog.csdn.net/u010293698/article/details/47956865
EasyUI DataGrid过滤用法实例
jQuery easyui dataGrid 动态改变排序字段名,一般情况下,在使用的时候,我们会点击相应字段进行排序,这里以JAVA为例,后端的实体类字段有可能和数据库的字段不一致; 如:实体类中的属性为userName,前台filed=...
该列设为超链接,点击时向调用的js方法传参。 return "(parameter)/>这里onclick的参数是怎么传的呢
在easyui 的datagrid编辑状态下实时更新其他处于编辑或者没在编辑下的列值,并在结束编辑后得到的row的数据为更改后的数据。
主要介绍了jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下