前言

我有这样的JSON对象

  1. {
  2. "UserName": "jf",
  3. "UserPwd": "123456",
  4. "CreateTime": null,
  5. "LastLogin": null,
  6. "RecordStatus": "创建时间:2013/10/10 16:50:01,创建人:admin1",
  7. "UserInfo": {
  8. "RealName": "江x",
  9. "Title": "GIS 工程师",
  10. "Sex": true,
  11. "Phone": "13880535888",
  12. "Fax": "02881402355",
  13. "Email": "jf@qq.com",
  14. "QQ": "298058458",
  15. "Address": "武科东4路104号",
  16. "SysId": "2013101016500254821864"
  17. },
  18. "Roles": null,
  19. "SysId": "2013101016500254821864"
  20. }

要让他绑定到Easy Ui DataGrid中,并能够编辑,先看一下效果吧,如图所示:

解决方案

一,要让内嵌的JSON在EASY UI中进行绑定,参考这位园友的实现:

http://www.cnblogs.com/nianming/archive/2011/08/31/2160270.html

二,要实现让上面的JSON对象在对话框中进行加载就要重写Easy ui Form 的方法了。

因为ASP.NET MVC生成的控件的name是UserInfo.* 格式

而Easy Ui 的load方法不支持二级属性,所以就只有重新实现load方法了。

我这边也是参考了form Load 方法的实现

代码如下:

  1. 正确代码//添加easyui的自定义方法实现form load的问题
  2. $.extend($.fn.form.methods, {
  3. myload: function (jq, data) {
  4. return jq.each(
  5. function () {
  6. loadVal(this, data);
  7. }
  8. );
  9.  
  10. function loadVal(formElement, data) {
  11. if (!$.data(formElement, "form")) {
  12. $.data(formElement, "form", {
  13. options: $.extend({}, $.fn.form.defaults)
  14. });
  15. }
  16. var opts = $.data(formElement, "form").options;
  17. if (typeof data == "string") {
  18. var optSource = {};
  19. if (opts.onBeforeLoad.call(formElement, optSource) == false) {
  20. return;
  21. }
  22. $.ajax({
  23. url: data,
  24. data: optSource,
  25. dataType: "json",
  26. success: function (data) {
  27. bindValue(data);
  28. },
  29. error: function () {
  30. opts.onLoadError.apply(formElement, arguments);
  31. }
  32. });
  33. } else {
  34. bindValue(data);
  35. }
  36.  
  37. function bindValue(data) {
  38. var form = $(formElement);
  39. for (var name in data) {
  40. var val = data[name];
  41. var rr = setRadioAndCheckBox(name, val);
  42. if (!rr.length) {
  43. var f = form.find("input[numberboxName=\"" + name + "\"]");
  44. if (f.length) {
  45. f.numberbox("setValue", val);
  46. } else {
  47. if (typeof val === 'object' && val != null) {
  48. $.each(val, function (cName, value) {
  49.  
  50. var crr = setRadioAndCheckBox(name + "." + cName, value);
  51. if (!crr.length) {
  52. var cf = form.find("input[numberboxName=\"" + name + "." + cName + "\"]");
  53. if (cf.length) {
  54. cf.numberbox("setValue", value);
  55. } else {
  56. $("input[name=\"" + name + "." + cName + "\"]", form).val(value);
  57. $("textarea[name=\"" + name + "." + cName + "\"]", form).val(value);
  58. $("select[name=\"" + name + "." + cName + "\"]", form).val(value);
  59. }
  60. }
  61. });
  62. } else {
  63. $("input[name=\"" + name + "\"]", form).val(val);
  64. $("textarea[name=\"" + name + "\"]", form).val(val);
  65. $("select[name=\"" + name + "\"]", form).val(val);
  66. }
  67. }
  68. }
  69. setEasyUiCtrl(name, val);
  70. }
  71. opts.onLoadSuccess.call(formElement, data);
  72. setValBox(formElement);
  73. }
  74.  
  75. ;
  76.  
  77. function setRadioAndCheckBox(name, val) {
  78. var rr = $(formElement).find("input[name=\"" + name + "\"][type=radio], input[name=\"" + name + "\"][type=checkbox]");
  79. rr._propAttr("checked", false);
  80. rr.each(function () {
  81. var f = $(this);
  82. if (f.val() == String(val) || $.inArray(f.val(), val) >= 0) {
  83. f._propAttr("checked", true);
  84. }
  85. });
  86. return rr;
  87. }
  88.  
  89. ;
  90.  
  91. function setEasyUiCtrl(name, val) {
  92. var form = $(formElement);
  93. var cc = ["combobox", "combotree", "combogrid", "datetimebox", "datebox", "combo"];
  94. var c = form.find("[comboName=\"" + name + "\"]");
  95. if (c.length) {
  96. for (var i = 0; i < cc.length; i++) {
  97. var type = cc[i];
  98. if (c.hasClass(type + "-f")) {
  99. if (c[type]("options").multiple) {
  100. c[type]("setValues", val);
  101. } else {
  102. c[type]("setValue", val);
  103. }
  104. return;
  105. }
  106. }
  107. }
  108. }
  109.  
  110. ;
  111.  
  112. function setValBox(eleForm) {
  113. if ($.fn.validatebox) {
  114. var t = $(eleForm);
  115. t.find(".validatebox-text:not(:disabled)").validatebox("validate");
  116. var valBox = t.find(".validatebox-invalid");
  117. valBox.filter(":not(:disabled):first").focus();
  118. return valBox.length == 0;
  119. }
  120. return true;
  121. }
  122.  
  123. ;
  124. }
  125. }
  126. });

编辑用户的时候这样调用就可以了:

  1. 正确代码 function EditItem() {
  2. var row = $('#fixedGrid').datagrid('getSelected');
  3. if (row) {
  4. $('#dlgEdit').dialog('open').dialog('setTitle', '编辑用户');
  5.  
  6. $('#UpdateForm').form("reset");
  7. var id = row.SysId;
  8. //去读取数据库中的最新数据,防止多人编辑
  9. $.getJSON('@Url.Action("GetCompleteUserInfoById", "RestApi")' + '/' + id, function(data) {
  10. $('#UpdateForm').form('myload', data);
  11. });
  12. }
  13. }

让Easy UI 的DataGrid直接内嵌的JSON对象,并重写form load 方法的更多相关文章

  1. Flex4 DataGrid ItemRenderer内嵌方式

    Flex4 DataGrid ItemRenderer像Flex3一直内嵌ItemRenderer会报空对象引用的错误,如: <s:GridColumn dataField="titl ...

  2. 微信小程序中使用 <web-view> 内嵌 H5 时,登录问题的处理方法

    在微信小程序的开发中,经常遇到需要使用 <web-view></web-view> 内嵌 H5 的需求.在这种需求中比较棘手的问题应该就是登录状态的判断了,小程序中的登录状态怎 ...

  3. easy ui datagrid 让某行复选框不能选中

    //百度查找出来的 onLoadSuccess: function(data){//加载完毕后获取所有的checkbox遍历             if (data.rows.length > ...

  4. springboot~mongo内嵌集合的操作

    对于mongodb的内嵌对象的各种操作大叔在.net平台时已经说过,同时大叔也自己封装过mongo的仓储,使用也都很方便,而在java springboot框架里当然也有对应的方法,下面主要说一下,希 ...

  5. 如何解决Angular网页内嵌推特时间线无法正常显示

    我最近解决了一个折磨了我好久但是解决方法却只是添加两三行代码的问题.我没有在网上找到合适的解决方案,最后是我根据官方网站和很多的帖子里的部分代码得到的启发,尝试了很久之后得到的解决方法.因为过程实在是 ...

  6. MongoDB .Net Driver(C#驱动) - 内嵌数组/嵌入文档的操作(增加、删除、修改、查询(Linq 分页))

    目录 一.前言 1. 运行环境 二.前期准备工作 1. 创建 MongoDBContext MongoDb操作上下文类 2.创建测试类 3.创建测试代码 三.内嵌数组增加元素操作 1.Update.S ...

  7. Springboot源码分析之代理对象内嵌调用

    摘要: 关于这个话题可能最多的是@Async和@Transactional一起混用,我先解释一下什么是代理对象内嵌调用,指的是一个代理方法调用了同类的另一个代理方法.首先在这儿我要声明事务直接的嵌套调 ...

  8. [VSTO] 区分MAILITEM的ATTACHMENT是真正的附件还是内嵌资源

    在遍历MailItem的Attachments集合的时候发现,不管是真正的附件还是内嵌资源,比如邮件内容中内嵌的图片(Embedded Image),都是Attachments集合的元素,通过查看at ...

  9. easy ui datagrid 增,删,改,查等基本操作

    如下图: ①列表信息图 ②添加信息图 ③修改信息图 html代码: <%@ Page Title="" Language="C#" MasterPageF ...

随机推荐

  1. spring jpa exists

    Subquery<A> subquery = criteriaQuery.subquery(A.class);Root<A> root1 = subquery.from(A.c ...

  2. cdoj802-Just a Line

    http://acm.uestc.edu.cn/#/problem/show/802 Just a Line Time Limit: 3000/1000MS (Java/Others)     Mem ...

  3. MQ基础概念和介绍

    一.中间件 MQ是一种中间件产品,至于什么是中间件,中间件能干什么,参见以下链接: http://baike.baidu.com/view/23710.htm 二.WebSphere MQ的原理 We ...

  4. js strict 关键字

    strict strict模式,JavaScript在设计之初,为了方便初学者学习,并不强制要求用var申明变量.这个设计错误带来了严重的后果:如果一个变量没有通过var申明就被使用,那么该变量就自动 ...

  5. Spring框架的事务管理之编程式的事务管理(了解)

    1. 说明:Spring为了简化事务管理的代码:提供了模板类 TransactionTemplate,所以手动编程的方式来管理事务,只需要使用该模板类即可!!2.手动编程方式的具体步骤如下: 1.步骤 ...

  6. windows常用运行命令总结

    开始→运行→命令集锦 winver---------检查Windows版本 wmimgmt.msc----打开windows管理体系结构(WMI) wupdmgr--------windows更新程序 ...

  7. css简单分页

    html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...

  8. Linux 添加硬盘

    一.简介 本文介绍为Linux 添加硬盘的基本方法,同时适用于为虚拟机添加硬盘的情况.   二.添加小于2T的硬盘 1)分区 fdisk /dev/hda 2)建立文件系统 3)设置开机自动挂载磁盘 ...

  9. PAT 1062 最简分数(20)(代码+思路)

    1062 最简分数(20 分) 一个分数一般写成两个整数相除的形式:N/M,其中 M 不为0.最简分数是指分子和分母没有公约数的分数表示形式. 现给定两个不相等的正分数 N​1​​/M​1​​ 和 N ...

  10. c++11日志练习

    /************************************************************** 技术博客  http://www.cnblogs.com/itdef/ ...