#把JSON数据载入到页面表单的两种思路(对easyui自带方法进行改进)

##背景
项目中经常需要把JSON数据填充到页面表单,一开始我使用easyui自带的form load方法,觉得效率很低,经常在载入数据的时候有假死现象(实际项目中的表单一般都100-200个字段以上),而且不能处理radio/checkbox的情况。(easyui的思路是把它们都用combo去处理) ##思路
问题可以转化为,现在有一堆JSON数据,有一个表单,可能是一一对应的,要把这个数据填写到表单上,一般说来有两种思路 1. `方案一`针对数据,一个个选择元素进行填充
2. `方案二`先选择所有的元素,再针对数据进行填充 到底哪种比较优呢? ##测试验证
可能也有人大概想到较优方案,但是对于实事求是的我,还是要写些代码去测试验证 [我的测试例子](http://p2227.github.io/demo/loadForm/) 效果截图: ![效果截图](https://images0.cnblogs.com/blog/84053/201402/032334565497675.jpg) ##结果
`方案二`的思路明显要比`方案一`的优,而且查看原代码后发现,easyui自带的form load方案是以`方案一`为基准去处理的,再加上一些细节的处理,效率非常的慢. ##改进
实际上我们还要处理radio/checkbox的情况,以及处理其他一些细节,故最后整理封装的代码如下
```javascript
!function($){
$.fn.extend({
/*
把JSON数据填充进表单,兼容easyui渲染过的表单
* 20140203 reconstructed by p2227
* 参数:
* relateTable:关系表,key-value对象,即JSON数据与表单有不对应时的另外对照表
* data:要填充的JSON数据
* callBack:填充完数据后的回调函数,一般说来填充完数据要进行表单验证
*
* 用法:
* $('form').loadForm({data:{key,value}});
* */
loadForm:function(conf){
conf = conf || {};
conf.relateTable = conf.relateTable || {}; var rt = conf.relateTable;
var formObj = this;
var jsonData = conf.data;
var newData = {};
function fill1EasyUI(dom,data1){ //填充值到一个easyUI表单对象上
//目测针对combobox和datebox,其他表单对象 建议调用 easyUI本身的 form.load方法
var eDom = $("[comboName='" + dom.name + "']",formObj); //找到easyUI起作用的dom元素(不带name)
if(eDom.length<=0) return; var type = eDom[0].className.match(/(\w*?)-f/); //该dom的类上第一个带 "任意字母-f"的类
if(type && type.length>0){
type = type[1];
if(/datebox/i.test(type)){
data1 = flitDate(data1);
}
if (eDom[type]("options").multiple){
eDom[type]("setValues", data1.replace(/\s*,\s*/g,",").split(","));
} else {
eDom[type]("setValue", data1);
}
}else{
if(eDom.next("span.datebox").length>0){ //for IE7 IE6
eDom.datebox("setValue", flitDate(data1));
}
}
} /* 输入:2012-04-04 00:00:00,2012.2.2,2012/4/7
* 输出:2012-04-04
* */
function flitDate(dStr){
if(dStr){
var dreg = /(\d{4})([-\/.])(\d{1,2})\2(\d{1,2})/;
var sval = dStr.match(dreg)[0].replace(dreg,"$1-$3-$4");
return sval;
}else{
return dStr;
}
} function fill1Simple(dom,data1){
if(dom == undefined){ return;} if(dom.className.match(/combo-value/i)){
fill1EasyUI(dom,data1); //按照easyUI的法则填充数据
}else{
var $dom = $(dom);
if($dom.is("span.om-combo>input")){
$dom.omCombo('value',data1)
}else{
dom.value = data1; //普通的html元素赋值
}
}
} //把网页上需要额外对照的数据也加到填充数据中
$.each(rt,function(key,value){
if(jsonData[key]){
jsonData[value.replace(/\\*/g,'')]=jsonData[key];
}
}); /* 填充数据的主函数
*
* 是用表单为主循环还是数据为主循环快???要做测试。
* 测试结果:以表单为主循环,必需将EasyUI和一般表单项分开处理
*
* 必须要把radio,checkbox放在同一起处理,因为你也不清楚对照表里面的项目是text还是radio
* */
var nameflag="";//name标记 如果找到有name相同的 data,那就设置标记,以便循环只运行一次
$("input[name],textArea[name],select[name]",formObj).each(function(){
//在实际项目中,有这样的需要:JSON数据key总是大写,也要填充到页面;按表单中属性为fillBack的去填充,故在此进行扩充
var filldata1 = jsonData[this.name] || jsonData[this.name.toUpperCase()] || jsonData[this.getAttribute("fillBack")];
if(jsonData[this.name] === 0 || jsonData[this.name.toUpperCase()] === 0 || jsonData[this.getAttribute("fillBack")] === 0){
filldata1 = 0;
}
if(filldata1 === undefined || filldata1 === "" || filldata1 === null|| filldata1 === "null"){
return;
}else{
if(/radio/i.test(this.getAttribute("type"))){
if(this.name==nameflag){ return; }
nameflag = this.name;
$("input[name='"+ nameflag +"'][value=" + $.trim(filldata1) + "]").prop("checked",true);
}else if(/checkbox/i.test(this.getAttribute("type"))){
if(this.name==nameflag){ return; }
nameflag = this.name; $("input[name='"+ nameflag +"']").prop("checked",false)//首先要清空原有数据
$.each(filldata1.split(','),function(k,v){
$("input[name='"+ nameflag +"'][value='" + $.trim(v) + "']").prop("checked",true);
})
}else{
this.value = "";//首先要清空原有数据
fill1Simple(this,filldata1);
}
}
}); if(typeof conf.callBack == "function"){
conf.callBack(jsonData);
}
}
});
}(jQuery);
```

把JSON数据载入到页面表单的两种思路(对easyui自带方法进行改进)的更多相关文章

  1. SpringMVC接收页面表单参数-java-电脑编程网

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

  2. JavaScript学习——使用JS完成注册页面表单校验

    1.步骤分析 第一步:确定事件(onsubmit)并为其绑定一个函数 第二步:书写这个函数(获取用户输入的数据<获取数据时需要在指定位置定义一个 id>) 第三步:对用户输入的数据进行判断 ...

  3. html 页面表单如果是disabled,则不能提交到服务器端,request.getParameter得到的将为null

    html 页面表单如果是disabled,则不能提交到服务器端,request.getParameter得到的将为null 解决方法:使用hidden 利用javascript赋值,传递到后台

  4. 记录ASP.NET页面表单初始状态(主要是为了前台可以根据这个判断页面是否变动了)

    把页面表单状态记录到HiddenField中. 这里只提供后台代码, 前台逻辑根据需求自由定义. 存放值的ViewState: protected Dictionary<string, stri ...

  5. 使用JQuery.Validate插件来校验页面表单有效性

    使用JQuery.Validate插件来校验页面表单有效性​1. [代码] 常见的注册表单元素 <form action="#" method="post" ...

  6. SpringMVC获取页面表单参数的几种方式

      以下几种方式只有在已搭好的SpringMVC环境中,才能执行成功!      首先,写一个登陆页面和一个Bean类 <%@ page language="java" co ...

  7. SpringMVC接收页面表单参数

    一个普通的表单. 表单的代码如下: <%@ page language="java" contentType="text/html; charset=UTF-8&q ...

  8. SpringMVC接收页面表单参数(转)

    作者:CN.programmer.Luxh 和java相关 一个普通的表单. 表单的代码如下: <%@ page language="java" contentType=&q ...

  9. HTML 之 Web页面表单form中只有一个input的text元素,按回车默认提交

    WEB开发中,如果页面的 form 中只有一个input元素,在该input元素的输入框中按回车(注:此时并没有写对应的onkeydown等事件处理),则浏览器会默认提交表单,请看如下代码: < ...

随机推荐

  1. 测试dns

    测试dns nslookup test.cn 10.109.68.114 ipconfig /flushdns dig test.cn @10.109.68.114 sudo /etc/init.d/ ...

  2. AIX下安装bash

    在AIX系统下,默认是没有安装bash环境的,对于经常操作的维护人员来说,非常不方便,所以下面我们来动手安装bash. 1.确认系统是否已安装bash 方法1:之间敲bash命令,若提示没有此命令则没 ...

  3. 移动前端UI选择

    移动前端UI选择 目录 三.SUI Mobile   一.jQuery Mobile jQuery Mobile 是jQuery在移动设备上的版本,做为主要针对移动设备的框架来说,它提供一个移动设备平 ...

  4. java中的单例设计模式

    单例模式有一下特点: 1.单例类只能有一个实例. 2.单例类必须自己自己创建自己的唯一实例. 3.单例类必须给所有其他对象提供这一实例. 单例模式确保某个类只有一个实例,而且自行实例化并向整个系统提供 ...

  5. OpenGL ES 2.0 纹理映射

    纹理坐标用符点数表示,范围一般从0.0到1.0,在纹理坐标系中.纹理坐标系原点在左上侧,向右为S轴,向下为T轴.两个轴的取值范围都是0.0-1.0. 纹理映射 纹理映射:把一幅纹理图应用到相应的几何图 ...

  6. 13年山东省赛 The number of steps(概率dp水题)

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud The number of steps Time Limit: 1 Sec  Me ...

  7. 最快的方法来清除Chrome浏览器DNS高速缓存

    最快的方法是直接数据url.那么不需要清除dns高速缓存. chrome://net-internals/#dns 一般步骤,要经过下列几项. Chrome - > 扳手 - > 选项 - ...

  8. mapxtreme C# 完美车辆动态轨迹展示

    演示程序请在 http://pan.baidu.com/s/1jG9gKMM#dir/path=%2F%E4%BA%A7%E5%93%81%2FDemos 找 Trajectory.rar 轨迹回放功 ...

  9. python基础学习(五)while循环语句

    while循环基本使用 循环的作用就是让指定的代码重复的执行 while循环最常用的应用场景就是让执行的代码按照指定的次数重复执行 流程图 基本语法 初始条件设置 —— 通常是重复执行的 计数器 wh ...

  10. 009_npm常用命令参数总结

    npm是什么 NPM的全称是Node Package Manager,是随同NodeJS一起安装的包管理和分发工具,它很方便让JavaScript开发者下载.安装.上传以及管理已经安装的包. 一.np ...