1.前言 HTML5 storage提供了一种方式让网站能够把信息存储到你本地的计算机上，并再以后需要的时候进行获取。这个概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候cookie都会被发送过去。HTML5的storage是存储在你的计算机上，网站在页面加载完毕后可以通过javascript来获取这些数据。首先自然是检测浏览器是否支持本地存储。在HTML5中，本地存储是一个window的属性，包括localStorage和sessionStorage，从名字应该可以很清楚的辨认二者的区别，前者是一直存在本地的，后者只是伴随着session，窗口一旦关闭就没了。二者用法完全相同，这里以localStorage为例。
if(window.localStorage){
alert('支持localStorage');
}else{
alert('不支持localStorage');
}
2.基本用法 存储数据的方法就是直接给window.localStorage添加一个属性，例如：window.localStorage.a 或者 window.localStorage["a"]。它的读取、写、删除操作方法很简单，是以键值对的方式存在的，如下：
localStorage.name = "kobi";//设置name为"kobi"
localStorage["name"] = "koko";//设置name为"koko"，覆盖上面的值
localStorage.setItem("age","18");//设置age为"18"
var a1 = localStorage["name"];//获取name的值
var a2 = localStorage.age;//获取age的值
var b = localStorage.getItem("name");//获取name的值
localStorage.removeItem("c");//清除c的值
这里最推荐使用的自然是getItem()和setItem()，清除键值对使用removeItem()。如果希望一次性清除所有的键值对，可以使用clear()。另外，HTML5还提供了一个key()方法，可以在不知道有哪些键值的时候使用，如下：
var storage = window.localStorage;
function showStorage(){
for(var i=0;i<storage.length;i++){
//key(i)获得相应的键，再用getItem()方法获得对应的值
document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "<br>");
}
}
3.业务需求 表单实时保存数据，下次打开则提示是否继续编辑。图片等控件不支持，只支持简单的控件。【防止突然断电或浏览器崩溃时，下次打开还可以继续编辑并保存】。这样自然而然就想到了HTML5的本地存储功能。既然js写的烂，写的差，就当练手了。
其实这些数据的保存很简单，无非就是一些简单的标签数据的保存。先来一个最简单的js版本。
1/**2* 功能：保存用户修改完form标签内容在LocalStorage中。3* 作者：黄金锋 (549387177@QQ.com)4* 日期：2015-11-1 11:14:015* 修改：2015-11-11 16:09:006* 版本：version 2.07*/89define(function() {1011//从localStorage中加载数据12functiononload(form) {1314varfh =form_handler;15varp =fh.getParams(form);16if(!p.bimId || !p.formId || !p.iid) {17return;18}19varid = 'FORM_' + DCI.LoginUser.UserId + '_' + p.bimId + '_' + p.formId + '_' +p.iid;20//alert(id);2122varformDataDb;23varallControl = $(form).find("input:text[name],textarea[name]");2425//从本地取26varstorage =localStorage.getItem(id);27if(storage !=null) {28varmyData =JSON.parse(storage);29allControl.each(function(i, e) {30varname = $(e).attr("name");31if(myData[name] !=null) {32$(e).val(myData[name]);33$(e).change();34}35});36}373839//绑定change事件40allControl.each(function(i, el) {41varname = $(el).attr('name');42if(name) {43$(el).on('change',function() {44onchange(this);45});46}47});4849//保存修改的数据50functiononchange(el) {51varstorage =localStorage.getItem(id);52if(storage ==null) {53formDataDb =newObject();54varkey = $(el).attr("name");55varvalue =$(el).val();56formDataDb[key] =value;57localStorage.setItem(id, JSON.stringify(formDataDb));58}else{59varmyData =JSON.parse(storage);60varkey = $(el).attr("name");61varvalue =$(el).val();62myData[key] =value;63localStorage.setItem(id, JSON.stringify(myData));64}65}66};6768//删除localStorage中的数据69functiononsave(form) {70varfh =form_handler;71varp =fh.getParams(form);72varid = 'FORM_' + DCI.LoginUser.UserId + '_' + p.bimId + '_' + p.formId + '_' +p.iid;73localStorage.removeItem(id);7475varallGrid = $(form).find(".form-table");76varformId = $(form).data("formid");77allGrid.each(function(index,element) {78varformName = $(element).find("input:hidden[data-formid]").attr("name");79varstorageKey = "FORM_" + formId + "_" +formName;80localStorage.removeItem(storageKey);81});82}8384return{85onload: onload,86onsave: onsave,87}88});
表单都是自动通过模版生成的，这里附上表单加载需要的form.js.
1if(!window.form_handler) {//防止重复加载2window.f_action =new(function() {//表单事件处理对象，封装表单事件的处理程序34this.seltime =function() {5if($.fn.datetimepicker) {6var$input = $(this).parent().find('input');7if(!$input.attr('readonly')) {8varformat;9if(!$input.data('datetimepicker')) {//添加日期控件10format =form_handler.getElDateFormat($input);11varminView = 2;12if(format.indexOf('i') >= 0)13minView = 0;14varform = $(this).closest('form');15$input.datetimepicker({16startDate:newDate('100/1/1'),17endDate:newDate('10000/1/1'),18format: format,19language: 'zh-CN',20todayHighlight:true,21autoclose:true,22minView: minView,23todayBtn:true,24forceParse:false,25container: form26});27}28$input.datetimepicker('show');2930varval =form_handler.getElDateValue($input, format);31if(val) {32vardate =newDate(val);33if(date && date != 'Invalid Date')34$input.datetimepicker('update', date);35}36}37}38};3940this.joinControl =function(sender, target, value, isExPRession, conditionFields, isDataSource) {41if(!$(sender).attr('readonly'))42form_handler.joinControl(sender, target, value, isExpression, conditionFields, isDataSource);43};4445this.runMethod =function(sender, method, params) {46if(!$(sender).attr('readonly')) {47require(['form.run'],function() {48varfunc = eval('form_run.' +method);49if(func) {50varform = $(sender).parents('form');51varb =form_handler.getParams(form);52func.call(sender, form, b, params);53}54else55alert('未实现函数' +method);56});57}58};5960this.selectGlossary =function(sender) {61varctrl = $(sender).parent().find('input,textarea');62if(ctrl.length) {63if(!ctrl.attr('readonly')) {64varfield = ctrl.attr('name');65varform = $(sender).closest('form');66varformId = form.data('formid');67varglossaryKey = ctrl.data('glossary');68require(['glossary'],function() {69g_action.showGlossary(formId + '_' + field, ctrl, form, glossaryKey,function(ctrl) {70varel;71if($(ctrl).CSS('position') == 'absolute')72el =$(ctrl);73else//寻找绝对定位的父节点74$(ctrl).parentsUntil('form').each(function(i, e) {75if($(e).css('position') == 'absolute')76el =$(e);77});78if(el) {79varposition =$(el).position();80return{81top: position.top +$(el).height(),82left: position.left,83};84}85});86});87}88}89};9091this.runform =function(sender, formtype, formId, variables, controls, iid) {92varmainForm = $(sender).closest('form');93if(formtype == 'changeform') {94for(variincontrols) {95if(controls[i][1].indexOf('$[ID]') > -1 && !form_handler.getElValue(mainForm, controls[i][0])) {96alert('找不到记录。');97return;98}99}100}101varreg = /\$\[([^[\]]+)\]/g;102vardata ={103};104data.formId =formId;105data.formType =formtype;106data.dialogId = 'DialogRunForm';107if(iid) {108data.iid = iid.replace(reg,function(str, subStr) {109returnform_handler.getElValue(mainForm, subStr);110});111}112varurl = DefaultUrl + 'Form/DialogRunForm';113showAjaxDialog(data.dialogId, url, data,true, document.body,function(state, data) {114if(state == 'ok') {115varchildForm = $('#DialogRunForm form');116if(formtype == 'addform') {117varidVal = childForm.find('[name="ID"]').val();118childForm.data('iid', idVal);119childForm.data('bimid', idVal);//兼容3.0120form_handler.submitForm(childForm, submitFormCallback, document.body);121}122elseif(formtype == 'changeform') {123form_handler.submitForm(childForm, submitFormCallback, document.body);124}125elseif(formtype == 'queryform') {126if(childForm.find('table tr.active').length)127submitFormCallback();128else129alert('请选择一行。');130}131}132133functionsubmitFormCallback() {134for(variincontrols) {135varc =controls[i];136varv = c[1].replace(reg,function(str, subStr) {137returnform_handler.getElValue(childForm, subStr);138});139form_handler.getEl(mainForm, c[0]).val(v);140}141$('#DialogRunForm').modal('hide');142}143},function(data, btn) {144$('#DialogRunForm .modal-title').text($(sender).val());145form_handler.openFormCallback($('#DialogRunForm form'));146});147};148149this.urlChanged =function(scrop, iframeclass) {150varurl =$(scrop).val();151$('.' + iframeclass).attr('src', url);152};153})();154155window.form_handler =newfunction() {//表单操作对象，提供接口供外部调用156157var$this=this;158159this.openFormCallback =function(form, dirtyCallback) {160161initElement();//初始化基本元素162initCtrl();//初始化控件163initModify();//修改痕迹164onload();//load事件165166functioninitElement() {167varallControl = $(form).find('input:text,input:checkbox,input:radio,input:hidden,textarea');168allControl.each(function(i, el) {169varname = $(el).attr('name');170if(name) {171$(el).on('change',function() {172onchange(this);173});174}175});176$(form).find('input:checkbox,input:radio').change(function(e) {177if($(this).is('input:radio')) {178varname = $(this).attr('name');179$(form).find('input:radio[name="' + name + '"]').val('0').data('dirty',true);180}181if($(this).is(':checked'))182$(this).val('1');183else184$(this).val('0');185});186$(form).find('input[readonly],textarea[readonly]').keydown(function(evt) {187if(evt.keyCode == 8)returnfalse188});189//触发事件190allControl.each(function(i, el) {191if($(el).attr('data-dirty') == 'true') {192$(el).change();//联动193}194});195}196197functiononchange(el) {198vard = $(form).data('dirty');199$(form).data('dirty',true);//表单已修改200$(el).data('dirty',true);//控件已修改201if(!d &&dirtyCallback)202dirtyCallback(form);203}204205functioninitCtrl() {206initGrid();207reqCtrl('.form-img:not(.hidden):not([disabled])', ['form.ctrl.image']);208reqCtrl('.richtextbox:not(.hidden)', ['form.ctrl.richtextbox']);209reqCtrl('.user-picker:not(.hidden)', ['form.ctrl.userpicker']);210reqCtrl('.form-chart:not(.hidden)', ['form.ctrl.chart']);211reqCtrl('.popover-toggle:not(.hidden)', ['form.ctrl.popover']);212reqCtrl('.Iframe:not(.hidden)', ['form.ctrl.Iframe']);213reqCtrl('.form-codeimage:not(.hidden)', ['form.ctrl.codeimg']);214}215216functioninitGrid() {217$(form).find('.form-table').each(function(i, cform) {218vaript = $(cform).find('input[name]');219varformId = ipt.data('formid');220varinit = JSON.parse($(cform).find('input[data-param="init"]').val());221varinitsame = JSON.parse($(cform).find('input[data-param="initsame"]').val());222$(cform).on('click', 'tr', selrow);223$(cform).find('.form-table-body').scroll(scrollTable);224$(cform).on('click', 'td.form-table-edit', editRow);225226if(!$(cform).hasClass('disabled')) {227$(cform).on('click',function(event) {228if(!$(event.target).is('input[name]'))229ipt.click();230});231$(cform).on('click', '.form-table-footer button.add-row', addRow);232if(initsame.length)233$(cform).on('click', '.form-table-footer button.add-samerow', addRow);234else235$(cform).find('button.add-samerow').remove();236$(cform).on('click', '.form-table-footer button.del-row', delRow);237$(cform).on('change', 'td input[type="checkbox"]', chkChange);238if(ipt.data('dirty')) {239$(cform).find('tr').data('insert',true);240}241}242else{243$(cform).find('input[type="checkbox"]').attr('disabled', 'disabled');244$(cform).find('.form-table-footer').remove();245$(cform).find('.form-table-body').css('bottom', 0);246}247dataGridTplRender($(cform).find('table'));248249functionchkChange() {250var$this= $(this);251varval = '0';252if($this.is(':checked'))253val = '1';254$this.val(val);255vartr = $(this).closest('tr');256tr.data('update',true);257ipt.change();258if(window.localStorage) {259vartable = $this.closest('table');260varname = table.find('colgroup col').eq($this.closest('td').index()).data('index');261varrow_data ={262};263row_data[name] =val;264require(['form.storage'],function(s) {265s.ongridedit(form, table, row_data, tr);266});267}268}269270functionselrow() {271$(this).siblings().removeClass('active');272$(this).addClass('active');273}274275functionscrollTable() {276varleft = $(this).scrollLeft();277$(this).siblings('.form-table-header').css('margin-left', -left);278}279280functioneditRow(e) {281vardata ={282formId: formId,283readOnly: $(cform).hasClass('disabled') ? 1 : 0284};285vartr = $(this).closest('tr');286showAjaxDialog('DialogGridRow', DefaultUrl + 'Form/DialogGridRow', data,true, document.body,function(state, data) {287if(state == 'ok') {288if($(cform).hasClass('disabled')) {289$('#DialogGridRow').modal('hide');290}291elseif($this.validateForm($('#DialogGridRow form'))) {292vartable = tr.closest('table');293varrow_data ={294};295varcells = tr.find('td');296table.find('colgroup col').each(function(idx, el) {297varindex = $(el).data('index');298if(index) {299varctrl = $('#DialogGridRow form [name="' + index + '"]');300vartd =cells.eq(idx);301if(ctrl.length) {302vartype = $(el).data('type');303vartext =ctrl.val();304if(type == 'CheckBox') {//复选框305varck = td.find('input[type="checkbox"]');306ck.val(text);307if(text == '1')308ck.prop('checked',true);309else310ck.prop('checked',false);311}312else{313td.text(text);314}315}316vaript = td.find('input');317if(ipt.length)318row_data[index] =ipt.val();319else320row_data[index] =td.text();321}322});323if(window.form_tpl) {324table.find('colgroup col').each(function(idx, el) {325if($(el).data('type') == 'Template') {326vartpl = eval('form_tpl.' + $(el).data('tpl'));327if(tpl) {328cells.eq(idx).html(tpl(row_data, cells.eq(idx - 1).text()));329}330}331});332}333if(window.localStorage)334require(['form.storage'],function(s) {335s.ongridedit(form, table, row_data, tr);336});337$('#DialogGridRow').modal('hide');338tr.data('update',true);339ipt.change();340tr.click();341}342}343},344function() {345if($(cform).hasClass('disabled'))346$('#DialogGridRow .modal-title').text('查看');347else348$('#DialogGridRow .modal-title').text('编辑');349varchildForm = $('#DialogGridRow form');350$this.openFormCallback(childForm);351//获取列信息352vartable = tr.parents('table');353table.find('colgroup col').each(function(idx, el) {354vartd = tr.find('td').eq(idx);355varck = td.find('input[type="checkbox"]');356varvalue;357if(ck.length > 0) value =ck.val();358elsevalue =td.text();359vartarget = $('#DialogGridRow form [name="' + $(el).data('index') + '"]').val(value);360if(target.is(':checkbox')) {361if(value == '1')362target.attr('checked', 'checked');363else364target.removeAttr('checked');365}366});367});368}369370functionaddRow() {371varbtn = $(this);372varselRow = $(cform).find('table tr.active');373if(btn.is('.add-samerow') && !selRow.length) {374alert('请选择行。');375return;376}377vardata ={378formId: formId379};380vartable = $(cform).find('table');381showAjaxDialog('DialogGridRow', DefaultUrl + 'Form/DialogGridRow', data,true, document.body,function(state, data) {382if(state == 'ok') {383varchildForm = $('#DialogGridRow form');384variid = childForm.data('iid');385if(iid) {386if($this.validateForm(childForm)) {387vartr = $('<tr></tr>');388varrow_data ={389};390table.find('colgroup col').each(function(idx, el) {391vartd = $('<td></td>');392if(idx == 0) {393td.append('<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>');394td.addClass('form-table-edit');395}396else{397varindex = $(el).data('index');398if(index) {399if(index == 'IID') {//主键400row_data['IID'] =iid;401td.text(iid);402}403elseif(index == 'ID') {404row_data['ID'] = form.data('bimid');405td.text(row_data['ID']);406}407else{408varctrl = $('#DialogGridRow form [name="' + index + '"]');409if(ctrl.length) {410vartype = $(el).data('type')411vartext =ctrl.val();412if(type == 'CheckBox') {413varval = text == '1' ? '1' : '0';414td.append('<input type="checkbox" value="' + val + '" ' + (val == '1' ? 'checked="checked"' : '') + ' />');415}416else{417td.text(text)418}419row_data[index] =text;420}421}422}423}424if($(el).attr('width') == '0')425td.addClass('hidden');426td.appendTo(tr);427});428if(window.form_tpl) {429varcells = tr.find('td');430table.find('colgroup col').each(function(idx, el) {431if($(el).data('type') == 'Template') {432vartpl = eval('form_tpl.' + $(el).data('tpl'));433cells.eq(idx).html(tpl(row_data, cells.eq(idx - 1).text()));434}435});436}437438table.append(tr);439if(window.localStorage)440require(['form.storage'],function(s) {441s.ongridadd(form, table, row_data, tr);442});443$('#DialogGridRow').modal('hide');444tr.data('insert',true);445refreshGridRownum(table);446ipt.change();447448tr.click();449}450}451}452},function() {453$('#DialogGridRow .modal-title').text('新增');454varchildForm = $('#DialogGridRow form');455$this.openFormCallback(childForm);456$.ajax({457url: DefaultUrl + 'Form/GetChildFormIID',458type: 'post',459data: {460formId: formId461},462cache:false,463loadingScope: document.body,464success:function(r) {465variid = r.Data[0][0];466childForm.data('iid', iid);467}468});469for(varkeyininit) {470if(key != 'IID') {471varvalue =init[key];472varreg = /\$\[([^[\]]+)\]/g;473varvalue = value.replace(reg,function(str, subStr) {474return$this.getElValue(form, subStr);475});476childForm.find('[name="' + key + '"]').val(value);477}478}479if(btn.is('.add-samerow')) {//新增相同480vartable = selRow.closest('table');481varcols = table.find('colgroup col');482$.each(initsame,function() {483varkey =this;484cols.each(function(idx, el) {485if($(el).data('index') ==key) {486vartd = selRow.find('td').eq(idx);487varck = td.find('input[type="checkbox"]');488varvalue;489if(ck.length > 0) value =ck.val();490elsevalue =td.text();491vartarget = $('#DialogGridRow form [name="' + key + '"]').val(value);492if(target.is(':checkbox')) {493if(value == '1')494target.attr('checked', 'checked');495else496target.removeAttr('checked');497}498returnfalse;499}500});501});502}503});504}505506functiondelRow(e) {507vartable = $(cform).find('table');508vartr = table.find('tr.active');509if(tr.length) {510tr.removeClass('active').hide();511if(window.localStorage) {512require(['form.storage'],function(s) {513s.ongriddel(form, table, tr);514});515}516tr.data('delete',true);517if(tr.data('insert'))518tr.remove();519refreshGridRownum($(cform).find('table'));520ipt.change();521}522else523alert('请选择行。');524}525});526}527528functionreqCtrl(selector, deps) {529varctrls =$(form).find(selector);530if(ctrls.length) {531require(deps,function(r) {532ctrls.each(function() {533if(rinstanceofFunction)534r.apply(this);535elseif(rinstanceofObject)536r.onload.apply(this);537})538});539}540}541542functioninitModify() {543544$(form).mousedown(function(e) {545if($(form).data('readmark-loaded') && $(e.target).is('input:text,input:checkbox,input:hidden,textarea') && $(e.target).data('modified')) {546varel =e.target;547varname = $(el).attr('name');548if(name) {549if(!$(el).data('show-popover')) {550$(el).data('show-popover',true);551//$(el).data('timer', setTimeout(function (el) {552variid = $(form).data('iid');553varformId = $(form).data('formid');554$(el).data('getting-modifyLog',true);555$.ajax({556url: DefaultUrl + 'Form/ModifyLogData',557data: {558iid: iid, formId: formId, field: name559},560cache:false,561loadingScope: document.body,562success:function(r) {563if($(r).find('ul li').length && $(el).data('show-popover')) {564$(form).find('.popover').remove();565$(el).popover({566content: r,567html:true,568trigger: 'manual',569placement: 'left',570animation:true,571container: $(form),572template: '<div class="popover" role="tooltip"><div class="arrow"></div><div class="popover-content"></div></div>'573});574$(el).popover('show');575$(form).find('.popover').mouseenter(function() {576$(el).data('show-popover',false);577}).mouseleave(function() {578$(el).popover('destroy');579});580}581},582complete:function() {583$(el).data('getting-modifyLog',false);584}585});586//}, 100, el));587}588}589}590});591592$(form).mouSEOut(function(e) {593if($(form).data('readmark-loaded') && $(e.target).is('input:text,input:checkbox,input:hidden,textarea') && $(e.target).data('modified')) {594varel =e.target;595if(!$(el).data('getting-modifyLog')) {596varname = $(el).attr('name');597if(name) {598//var t = $(this).data('timer');599//if (t)600//clearTimeout(t);601if($(form).find('.popover').length) {602if($(el).data('show-popover')) {603setTimeout(function() {604if($(el).data('show-popover')) {605$(el).data('show-popover',false);606$(el).popover('destroy');607}608}, 100);609}610}611else{612$(el).data('show-popover',false);613$(el).popover('destroy');614}615}616}617}618});619}620621functiononload() {622if(window.localStorage)623require(['form.storage'],function(s) {624s.onload(form);625});626if($(form).data('onload'))627(function() {628eval($(form).data('onload'));629}).apply(form);630}631};632633functiondataGridTplRender(table) {634if(table.find('colgroup col[data-type="Template"]').length) {635require(['form.tpl'],function() {//模板列636varcols =[];637vartpls =[];638table.find('colgroup col').each(function(idx, el) {//获取列信息639cols[idx] = $(el).data('index');640if($(el).data('type') == 'Template') {641vartplStr = $(el).data('tpl');642vartpl = eval('form_tpl.' +tplStr);643if(tpl !=null)644tpls.push({ index: idx, tpl: tpl });645else//告知错误原因646alert('模板[' + tplStr + ']没定义。');647}648});649if(tpls.length) {650table.find('tr').each(function(idx, el) {651varrow_data ={};652varcells = $(el).find('td');653cells.each(function(idx, el) {//获取行数据654if(cols[idx]) {655vaript = $(el).find('input');656if(ipt.length)657row_data[cols[idx]] =ipt.val();658else659row_data[cols[idx]] =$(el).text();660}661});662$.each(tpls,function() {663vartd = cells.eq(this.index);664td.html(this.tpl(row_data, cells.eq(this.index - 1).text()));665});666});667}668});669}670}671672this.joinControl =function(sender, target, value, isExpression, conditionFields, isDataSource) {673if(isDataSource) {//数据源674$this.getDataSource(sender, value, [target], conditionFields);675}676else{677varresult;678if((result = /\$\{substr,([^,]+),(\d+),(\d+)\}\s+([^\s]+)/.exec(value)) !=null) {//截取字符串，谁设计的！！！！679varsourceField = result[1];680varstartIdx = result[2];681varlength = result[3];682vartargetField = result[4];683varform = $(sender).closest('form');684varsourceValue = $this.getElValue(form, sourceField.replace('@', '#'));685if(sourceValue !=null) {686$this.getEl(form, targetField).val(sourceValue.substr(parseInt(startIdx), parseInt(length))).change();//联动687}688}689elseif((result = /\$\{toStr,([^,]+),([^,]+)\}/.exec(value)) !=null) {//日期格式转换，又是谁设计的！！！690varname = result[1];691varformat = result[2];692varform = $(sender).closest('form');693varel = $this.getEl(form, name);694if(el.length) {695varval = $this.getElDateValue(el);696if(val) {697vardate =newDate(val);698vartargetValue = $this.getFomatDate(date, format);699form.find('[name="' + target + '"]').val(targetValue).change();//联动700}701}702}703else{//取值，包括系统值（从服务端）和其它字段值（从客户端），然后计算值704varsysName ={705};706varreg = /\$\{([^{}]+)\}/g;707vari = 0;708while((result = reg.exec(value)) !=null) {709sysName['[' + i + ']'] = result[1];710i++;711}712if(i > 0) {//服务端取系统值713$.ajax({714url: DefaultUrl + 'Form/GetSysValue',715type: 'post',716cache:false,717data: sysName,718success:function(r) {719joinControlCallback(sender, target, value, isExpression, r, isDataSource);720},721error:function() {722alert('取系统值失败！');723}724});725}726else{727joinControlCallback(sender, target, value, isExpression, {728}, isDataSource);729}730}731}732};733734functionjoinControlCallback(sender, target, value, isExpression, sysValue) {735try{736varform = $(sender).closest('form');737var$target, matches;738if(matches = (/([^:]+):item:([^:]+)/gi).exec(target))739$target =getSelectCell(form, matches).cell;740else741$target = form.find('[name="' + target + '"],[data-name="' + target + '"]');742743if($target.length) {744varreg = /\$\[([^[\]]+)\]/g;745varvalue = value.replace(reg,function(str, subStr) {746if(subStr.substr(0, 1) == '#') {747varel = form.find('[name="' + subStr.substr(1) + '"]');748if(el.data('combobox'))749returngetComboBoxValueText(el).text;750}751return$this.getElValue(form, subStr);752});753reg = /\$\{([^{}]+)\}/g;754value = value.replace(reg,function(str, subStr) {755returnsysValue[subStr];756});757if(isExpression) {758value =calcValue(value);759}760//联动761if($target.is(':text,textarea')) {762varov =$target.val();763if(!(!ov && !value || ov ==value)) {764$target.val(value);765$target.change();766}767}768elseif($target.is('td')) {//子表的单元格769varov =$target.text();770if(!(!ov && !value || ov ==value)) {771$target.text(value);772$target.parent('tr').data('update',true);773$target.closest('.form-table').find('input[name]').change();774}775}776elseif($target.data('codeimg')) {//二维码条形码777require(['form.ctrl.codeimg'],function(obj) {778obj.changeVal($target, value);779});780}781}782}783catch(err) {784alert("脚本错误！");785}786787functioncalcValue(value) {788value = value.replace(/toNumber\(\s*\)/, '0').replace(/roundFloat\(\s*,\s*\d+\s*\)/, '0');789value =eval(value);790791if(isNaN(value) || value ==null)792return'';793if(typeof(value) == 'number') {794varstr =String(value);795if(/\.[0-9]{8}/.test(str))//脚本坑爹的算术运算796str = String(roundFloat(value, 2));797returnstr;798}799returnString(value);800}801}802803this.getDataSource =function(sender, sourceId, fields, conditionFields, callback) {804varform = $(sender).closest('form');805vardata = $this.getParams(form);806data.sourceId =sourceId;807data.fieldName = fields.length > 0 ? fields[0] :null;808for(variinconditionFields) {809varf =conditionFields[i];810varvalue;811if(f == 'ID')//后期或者改成服务端处理812value =data.bimId;813else814value = $this.getElValue(form, f);815data['F[' + f + ']'] =value;816}817$.ajax({818url: DefaultUrl + 'Form/GetFormDataSource',819type: 'post',820cache:false,821data: data,822loadingScope: document.body,823success:function(r) {824for(variinfields) {825varcontrol = form.find('[name="' + fields[i] + '"],[data-name="' + fields[i] + '"]');826if(control.data('combobox')) {827varul = control.siblings('ul');828ul.empty();829for(varjinr.Data) {830ul.append($('<li></li>').text(r.Data[j][1]).data('value', r.Data[j][0]));831}832}833elseif(control.data('datagrid')) {//查询表单才用834varhash ={835};836for(vari = 0; i < r.Metadata.length; i++)837hash[r.Metadata[i].ID] =i;838varbox = control.closest('.form-table');839varcols = box.find('table colgroup col');840varmap ={841};//映射842for(vari = 0; i < cols.length; i++) {843varname = cols.eq(i).data('index');844if(name && hash[name] !=undefined) {845map[i] ={846idx: hash[name], col: cols.eq(i)847};848}849else{850map[i] ={851col: cols.eq(i)852};853}854}855vartb = box.find('table');856tb.find('tr').remove();857for(vari = 0; i < r.Data.length; i++) {858vartr = $('<tr></tr>');859vardisabled = box.hasClass('disabled');860vardisabledStr = disabled ? 'disabled="disabled"' : '';861for(varj = 0; j < cols.length; j++) {862vartd = $('<td></td>');863if(!disabled && j == 0) {864td.addClass('form-table-edit');865td.append('<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>');866}867elseif(map[j].idx !=undefined) {868if(cols.eq(j).data('type') == 'CheckBox') {869varv =r.Data[i][map[j].idx];870if(v == 1 || v == '1')871td.append('<input type="checkbox" value="1" checked="checked" ' + disabledStr + ' />');872else873td.append('<input type="checkbox" value="0" ' + disabledStr + ' />')874}875else{876td.text(r.Data[i][map[j].idx]);877}878}879if(map[j].col.attr('width') == 0)880td.addClass('hidden');881tr.append(td);882}883tb.append(tr);884}885dataGridTplRender(tb);886refreshGridRownum(tb);887}888elseif(control.hasClass('form-chart')) {//图表控件889varaccountId =r.Data.accountid;890if(accountId) {891varquery = {}, j = 0;892for(vari = 0; i < r.Data.conditions.length; i++) {893varc =r.Data.conditions[i];894if(c.value) {895varempty =true, hasCtrl =false;896varv = c.value.replace(/\$\[([^[\]$]+)\]/g,function(str, name) {897hasCtrl =true;898varelv = $this.getElValue(form, name);899if(elv) empty =false;900returnelv;901});902if(!(hasCtrl && c.checkNullField == 'true' &&empty))903query['filters[' + (j++) + ']'] =v;904}905}906require(['form.ctrl.chart'],function(c) {907c.loadChart(control, accountId, query);908});909}910}911elseif(control.is('input') || control.is('textarea')) {912if(r.Data.length > 0 && r.Data[0].length > 0) {913varvalue = r.Data[0][0]914varchange =false;915if(control.is(':text,textarea')) {916varov =control.val();917if(!(!ov && !value || ov ==value))918change =true;919}920if(change) {921control.val(value);922control.change();923}924}925}926}927if(callback)928callback(r);929},930error:function() {931alert('数据源' + sourceId + '获取失败。');932}933});934};935936this.getEl =function(form, name) {937returnform.find('[name="' + name + '"]');938};939940this.getElValue =function(form, name) {//获得元素值941varval = '';942varmatches;943if(matches = (/([^:]+):format:([^:]+)/gi).exec(name)) {//时间格式944name = matches[1];945varf = matches[2];946varel = form.find('[name="' + name + '"]');947if(el.hasClass('datetime')) {948vardateStr =this.getElDateValue(el);949if(dateStr) {950vardate =newDate(dateStr);951val =this.getFomatDate(date, f);952}953}954else{955val =el.val();956}957}958elseif(matches = (/([^:]+):item:([^:]+)/gi).exec(name)) {//选中行的值959varelInfo =getSelectCell(form, matches);960name =elInfo.name;961if(elInfo.cell.length)962val =elInfo.cell.text();963}964elseif(matches = (/([^:]+):sum:([^:]+)/gi).exec(name)) {//计算子表列总和965name = matches[1];966varcolname = matches[2];967varel = form.find('[name="' + name + '"]').parent();968vartable = el.find('table');969varidx = -1;970varsum = 0;971varerr =false;972table.find('colgroup:first').find('col').each(function(i, e) {973if($(e).data('index') ==colname)974idx =i;975});976if(idx > -1) {977table.find('tr').each(function(i, e) {978if($(e).is(':visible')) {979varnum = $(e).find('td').eq(idx).text();980if(num !=null&& num != '') {981varv =parseFloat(num);982if(isNaN(v)) {983if(!err) {984alert(num + '不是数字');985err =true;986}987}988else989sum +=v;990}991}992});993}994if(err) val = '';995elseval =sum.toString();996}997elseif(matches = /#([^#]+)/.exec(name)) {998varel = form.find('[name="' + matches[1] + '"]');999if(el.data('combobox'))1000val =getComboBoxValueText(el).text;1001}1002else{1003varel = form.find('[name="' + name + '"]');1004if(el.data('combobox'))1005val =getComboBoxValueText(el).value;1006else1007val =el.val();1008}1009if(val !=null)1010returnval;1011elsereturn'';1012};10131014functiongetComboBoxValueText(input) {1015varval =input.val();1016varul = input.siblings('ul');1017varlis = ul.find('li');1018for(vari = 0; i < lis.length; i++) {1019varli =lis.eq(i)1020vartext =li.text();1021if(!val && !text || val ==text) {1022return{1023value: li.data('value'), text: text1024};1025}1026}1027return{1028value: input.val(), text: input.val()1029};1030}10311032functiongetSelectCell(form, matches) {1033varname = matches[1];1034varcolname = matches[2];1035vartable = $(form).find('[name="' + name + '"]').closest('.form-table').find('table');1036vartr = table.find('tr.active');1037varcell;1038if(tr.length) {1039varidx = -1;1040table.find('colgroup').find('col').each(function(i, e) {1041if($(e).data('index') ==colname)1042idx =i;1043});1044if(idx > -1) {1045cell = tr.find('td').eq(idx);1046}1047}1048return{ name: name, cell: cell ?cell : $() };1049}10501051this.formatValue =function(form, value) {1052returnvalue.replace(/\$\[([^[\]$]+)\]/,function(str, name) {1053return$this.getElValue(form, name);1054});1055}10561057this.getFomatDate =function(date, format) {1058returnformat.replace(/y+/gi,function(str) {1059varyear =date.getFullYear().toString();1060if(str.length == 2)1061returnyear.length > 1 ? year.substr(year.length - 2) : year;1062returnyear;1063}).replace(/m+/gi,function(str) {1064varmonth = (date.getMonth() + 1).toString();1065if(str.length == 2)1066returnmonth.length > 1 ? month : '0' +month;1067returnmonth;1068}).replace(/d+/gi,function(str) {1069varday =date.getDate().toString();1070if(str.length == 2)1071returnday.length > 1 ? day : '0' +day;1072returnday;1073}).replace(/h+/gi,function(str) {1074varhour =date.getHours().toString();1075if(str.length == 2)1076returnhour.length > 1 ? hour : '0' +hour;1077returnhour;1078}).replace(/i+/gi,function(str) {1079varminute =date.getMinutes().toString();1080if(str.length == 2)1081returnminute.length > 1 ? minute : '0' +minute;1082returnminute;1083}).replace(/s+/gi,function(str) {1084varsecond =date.getSeconds().toString();1085if(str.length == 2)1086returnsecond.length > 1 ? second : '0' +second;1087returnsecond;1088});1089};10901091this.getElDateFormat =function(el) {1092varformat = $(el).data('date-format');1093if(!format)//yyyy-mm-dd hh:ii:ss1094format = 'yyyy-m-d';1095else1096format = format.replace(/y+/gi, 'yyyy')1097.replace(/m+/gi, 'm')1098.replace(/d+/gi, 'd')1099.replace(/h+/gi, 'h')1100.replace(/i+/gi, 'i')1101.replace(/s+/gi, 's');1102returnformat;1103}11041105this.getElDateValue =function(el, format) {1106varvalue =$(el).val();1107if(value) {1108if(!format) {1109format =this.getElDateFormat(el);1110}1111varyear, month, day, hour, minute, second;1112varreplace =[];1113varregex =newRegExp('^' + format.replace(/y+|m+|d+|h+|i+|s+/gi,function(str) {1114replace.push(str);1115return'(\\d+)'1116}) + '$');1117varmatches =regex.exec(value);1118if(matches) {1119for(vari = 0; i < replace.length; i++) {1120varreplaceStr =replace[i];1121varreplaceValue = matches[i + 1];1122switch(replaceStr) {1123case'yyyy': year = replaceValue;
break;1124case'm': month = replaceValue;
break;1125case'd': day = replaceValue;
break;1126case'h': hour = replaceValue;
break;1127case'i': minute = replaceValue;
break;1128case's': second = replaceValue;
break;1129}1130}1131returnvalidateDate(parseInt(year, 10), parseInt(month, 10), parseInt(day, 10), parseInt(hour, 10), parseInt(minute, 10), parseInt(second, 10));1132}1133}1134};11351136functionvalidateDate(year, month, day, hour, minute, second) {//校验日期是否合法1137if(!isNaN(year) && (year < 100 || year > 9999))//js:[100,未知] .net,Oracle:[1,9999]1138return;1139if(!isNaN(month) && (month < 1 || month > 12))1140return;1141if(!isNaN(day)) {1142if(!isNaN(year) && !isNaN(month)) {1143varmaxDay;1144if(month == 2) {//检测闰年1145if(year % 400 == 0 || year % 4 == 0 && year % 100 != 0)1146maxDay = 29;1147else1148maxDay = 28;1149}1150elseif(month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12)1151maxDay = 31;1152else1153maxDay = 30;1154if(day < 1 || day >maxDay)1155return;1156}1157else1158return;1159}1160if(!isNaN(hour) && (hour < 0 || hour > 23))1161return;1162if(!isNaN(minute) && (minute < 0 || minute > 59))1163return;1164if(!isNaN(second) && (second < 0 || second > 59))1165return;11661167return(isNaN(year) ? '100' : year) + '/' +1168(isNaN(month) ? '1' : month) + '/' +1169(isNaN(day) ? '1' : day) + ' ' +1170(isNaN(hour) ? '0' : hour) + ':' +1171(isNaN(minute) ? '0' : minute) + ':' +1172(isNaN(second) ? '0': second);1173}11741175this.validateForm =function(form, invalidHandler) {1176if($.fn.validate) {1177$(form).data('invalid-handler', invalidHandler)1178varvalidator =$(form).validate({1179showErrors:function(errMap, errList) {1180this.defaultShowErrors();1181},1182errorPlacement:function(label, element) {1183$(form).append(label);1184varel =$(element);1185if($(element).css('position') != 'absolute') {1186varclosest = element.parentsUntil('form');1187for(vari = closest.length - 1; i >= 0; i--) {1188if(closest.eq(i).css('position') == 'absolute') {1189el =closest.eq(i);1190
break;1191}1192}1193}1194varleft = parseFloat(el.css('left').substring(0, el.css('left').length - 2));1195vartop = parseFloat(el.css('top').substring(0, el.css('top').length - 2));1196left = isNaN(left) ? 0: left;1197top = isNaN(top) ? 0: top;1198label.css('position', 'absolute')1199.css('left', left)1200.css('top', top +$(element).outerHeight());12011202},1203invalidHandler:function(ev, validator) {1204varinvalidHandler = $(form).data('invalid-handler');1205if(invalidHandler)1206invalidHandler(ev, validator);1207},1208ignore: ''1209});1210returnvalidator.form();1211}1212returnfalse;1213};12141215this.submitForm =function(form, callback, maskBody, invalidHandler) {//包含验证1216if($(form).data('beforesave') && (function() { eval($(form).data('beforesave')) }).apply(form) ==false)1217return;1218if($this.validateForm(form, invalidHandler))1219$this.saveForm(form, callback, maskBody);1220};12211222this.saveForm =function(form, callback, maskBody, checkRule) {1223vardata = $this.getFormData(form);1224data.checkRule =checkRule;1225$.ajax({1226url: DefaultUrl + 'Form/Edit',1227data: data,1228type: 'POST',1229cache:false,1230loadingScope: document.body,1231success:function(r) {1232if(r.result == 'SUCCESS') {1233$(form).data('dirty',false);1234if(window.localStorage)1235require(['form.storage'],function(s) {1236s.onsave(form);1237});1238if(callback)1239callback(r);1240}1241elseif(r.result) {1242alert('《' + $(form).data('title') + '》保存失败：' +r.message);1243}1244else{1245DCI.systemRule.showRuleDialog(r,function(dialogId) {1246$this.saveForm(form, callback, maskBody,true);1247});1248}1249},1250error:function() {1251alert('《' + $(form).data('title') + '》保存失败。');1252}1253});1254};12551256this.getFormData =function(form) {1257vardata = $this.getParams(form);1258$this.getGridData(form);//子表1259form.find('input:text,input:checkbox,input:radio,input:hidden,textarea').each(function(i, el) {1260if($(el).data('dirty') || $(el).data('submit')) {1261varname = $(el).attr('name');1262if(name) {1263if($(el).hasClass('datetime')) {1264data['F[' + name + ']'] = $this.getElDateValue($(el));1265}1266elseif($(el).data('combobox')) {1267varvalueText =getComboBoxValueText($(el));1268data['F[' + name + ']'] =valueText.value;1269data['F[#' + name + ']'] =valueText.text;1270}1271elseif($(el).is(':radio')) {1272data['F[' + $(el).data('name') + ']'] =$(el).val();1273}1274elseif($(el).data('getdata')) {1275data['F[' + name + ']'] = $(el).data('getdata')();1276}1277else{1278data['F[' + name + ']'] =$(el).val();1279}1280}1281}1282});1283returndata;1284}12851286this.getGridData =function(form) {1287$(form).find('table').each(function(idx, tb) {1288varcontainer = $(tb).parents('.form-table');1289varinput = container.children('input[name]');1290if(input.data('dirty')) {1291vardata ={1292insert: [], update: [], del: [], idCol: 0, cols: []1293};1294varrowIdCol = -1;//行标识所在列1295varsCol = [];//记录要提交的列1296$(tb).find('colgroup col').each(function(idx, col) {1297varcolName = $(col).data('index');1298if(colName) {1299if(colName == 'IID')1300rowIdCol =idx;1301data.cols.push(colName);1302sCol[idx] =true;1303}1304});13051306$(tb).find('tr').each(function(idx, tr) {1307if($(tr).data('delete')) {//删除1308varrowId = $(tr).find('td').eq(rowIdCol).text();1309data.del.push(rowId);1310}1311elseif($(tr).data('insert')) {//插入1312data.insert.push(getRowData(tr, sCol));1313}1314elseif($(tr).data('update')) {//更新1315data.update.push(getRowData(tr, sCol));1316}1317});13181319input.val(JSON.stringify(data));1320}1321});13221323functiongetRowData(tr, sCol) {1324vardata =[];1325$(tr).find('td').each(function(idx, el) {1326if(sCol[idx]) {1327vaript = $(el).find('input');1328if(ipt.length > 0) {1329data.push(ipt.val())1330}1331else{1332data.push($(el).text());1333}1334}1335});1336returndata;1337}1338};13391340functionrefreshGridRownum(table) {1341varidx = -1;1342$(table).find('colgroup:first col').each(function(i, e) {1343if($(e).data('type') == 'RowNumber') {1344idx =i;1345}1346});1347if(idx > -1) {1348varrownum = 0;1349$(table).find('tr').each(function(i, e) {1350if(!$(e).data('delete'))1351$(e).find('td').eq(idx).text(++rownum);1352});1353}1354}13551356this.getParams =function(form) {1357variid = form.data('iid');1358varbimId = form.data('bimid');1359varformId = form.data('formid');1360varactId = form.data('actid');1361varcontextId = form.data('contextid');1362varkey = form.data('key');1363return{1364iid: iid, bimId: bimId, formId: formId, actId: actId, contextId: contextId, key: key1365};1366};13671368this.showForm =function(data, callback, closeCallback, loadCallback) {1369varfromName = "ShowForm";1370if(data.fromName) fromName = data.fromName;//默认为ShowForm1371data.key =data.contextId;1372data.dialogId = 'Dialog_' +fromName;1373varurl = DefaultUrl + 'Form/Dialog_ShowForm';1374showAjaxDialog(data.dialogId, url, data,true, document.body,function(state, data) {1375if(state == 'ok') {1376if(callback)1377callback(data);1378}else{1379if(closeCallback)1380closeCallback(data);1381}1382},function(data, btn) {1383varshowform = $('#Dialog_' + fromName).find('form');1384//if (!showform.data('readonly'))1385$this.openFormCallback(showform);//初始化控件1386if(loadCallback)1387loadCallback(data)1388//DCI.systemRule.showRuleDialog_Added(null, btn);1389});1390};13911392this.showModifyFields =function(form) {1393if($(form).is(':visible') && !$(form).data('readmark-loaded')) {1394$(form).data('readmark-loaded',true);1395$(form).find('span.readMark').remove();1396varb = $this.getParams(form);1397$.ajax({1398url: DefaultUrl + 'Form/GetModifyFields',1399data: {1400iid: b.iid, formId: b.formId1401},1402type: 'post',1403loadingScope: document.body,1404success:function(r) {1405for(variinr) {1406varelement = $this.getEl(form, r[i]);1407if(element.length && element.is(':visible')) {1408element.data('modified',true);1409varel =element;1410if(element.css('position') != 'absolute') {1411varclosest = element.parentsUntil('form');1412for(vari = closest.length - 1; i >= 0; i--) {1413if(closest.eq(i).css('position') == 'absolute') {1414el =closest.eq(i);1415
break;1416}1417}1418}1419varleft = parseFloat(el.css('left').substring(0, el.css('left').length - 2));1420vartop = parseFloat(el.css('top').substring(0, el.css('top').length - 2));1421left = isNaN(left) ? 0: left;1422top = isNaN(top) ? 0: top;1423$('<span class="readMark"></span>').css('position', 'absolute')1424.css('left', left +el.outerWidth())1425.css('top', top)1426.appendTo($(form));1427}1428}1429},1430error:function() {1431alert('修改痕迹获取失败。');1432}1433});1434}1435};14361437this.removeModifyMark =function(form) {1438$(form).data('readmark-loaded',false);1439$(form).find('span.readMark').remove();1440};1441};14421443window.toNumber =function(str) {1444if(str)1445returnparseFloat(str);1446return0;1447}14481449window.roundFloat =function(number, digits) {1450returnMath.round(number * Math.pow(10, digits)) / Math.pow(10, digits);1451}14521453$(function() {1454require(['css!form.style']);1455require(['jquery.validate'],function() {1456$.extend($.validator.messages, {1457'required': '这是必填项'1458});1459$.validator.addMethod("pattern",function(value, element, param) {1460if(!value) {1461returntrue;1462}1463if(typeofparam === "string") {1464param =newRegExp("^(?:" + param + ")$");1465}1466returnparam.test(value);1467}, "输入的格式不正确");14681469$.validator.addMethod("datetime",function(value, element) {1470if(!value)1471returntrue;1472varval =form_handler.getElDateValue($(element));1473if(val)returntrue;1474returnfalse;1475}, "日期时间不正确");14761477$.validator.addMethod('MaxNumber',function(value, element, param) {1478returncompareNumber.call(this, value, element, param,function(a, b) {1479if(isNaN(b) || !isNaN(a) && a <=b)1480returntrue;1481$(element).data('msg-MaxNumber', '请输入小于或等于' + b + '的数值');1482returnfalse;1483});1484},function(param, element) {1485return$(element).data('msg-MaxNumber');1486});14871488$.validator.addMethod('MinNumber',function(value, element, param) {1489returncompareNumber.call(this, value, element, param,function(a, b) {1490if(isNaN(b) || !isNaN(a) && a >=b)1491returntrue;1492$(element).data('msg-MinNumber', '请输入大于或等于' + b + '的数值');1493returnfalse;1494});1495},function(param, element) {1496return$(element).data('msg-MinNumber');1497});14981499$.validator.addMethod('DecimalDigits',function(value, element, param) {1500if(!value)1501returntrue;1502if(isNumber(value)) {1503varlen = 0;1504vardotIdx = value.lastIndexOf('.');1505if(dotIdx > -1) {1506vardigit = value.substr(dotIdx + 1);1507varzEnd = 0;1508for(vari = digit.length - 1; i >= 0; i--) {1509if(digit[i] == '0') zEnd++;1510else
break;1511}1512len = digit.length -zEnd;1513}1514if(len <=param)1515returntrue;1516}1517returnfalse;1518}, '请输入小数最多精确到{0}位的数值');15191520$.validator.addMethod('MaxDatetime',function(value, element, param) {1521returncompareDateTime.call(this, value, element, param,function(a, b, str) {1522if(b == 'Invalid Date' || a != 'Invalid Date' && a <=b)1523returntrue;1524$(element).data('msg-MaxDatetime', '请输入小于或等于' + str + '的日期时间');1525});1526},function(param, element) {1527return$(element).data('msg-MaxDatetime');1528});15291530$.validator.addMethod('MinDatetime',function(value, element, param) {1531returncompareDateTime.call(this, value, element, param,function(a, b, str) {1532if(b == 'Invalid Date' || a != 'Invalid Date' && a >=b)1533returntrue;1534$(element).data('msg-MinDatetime', '请输入大于或等于' + str + '的日期时间');1535});1536},function(param, element) {1537return$(element).data('msg-MinDatetime');1538});15391540functionisNumber(value) {1541return/^[0-9]+(?:\.[0-9]+){0,1}$/.test(value);1542}15431544functioncompareNumber(value, element, param, fn) {1545if(!value)1546returntrue;1547varn = isNumber(value) ?parseFloat(value) : NaN;1548varn2 =NaN;1549if(typeofparam === 'number') {1550n2 =param;1551}1552elseif(typeofparam === 'string') {1553varm = /\$\[([^[\]]+)\]/.exec(param);1554if(m) {1555varform = $(element).closest('form');1556varrelVal = form_handler.getElValue(form, m[1]);1557n2 = isNumber(relVal) ?parseFloat(relVal) : NaN;1558}1559}1560returnfn(n, n2);1561}15621563functioncompareDateTime(value, element, param, fn) {1564if(!value)1565returntrue;1566vart =newDate(form_handler.getElDateValue($(element))), t2, str;1567varm = /\$\[([^[\]]+)\]/.exec(param);1568if(m) {1569varform = $(element).closest('form');1570varrelEl = form_handler.getEl(form, m[1]);1571t2 =newDate(form_handler.getElDateValue(relEl));1572str =relEl.val();1573}1574else{1575t2 =newDate(param);1576str =form_handler.getFomatDate(t2, form_handler.getElDateFormat($(element)));1577}1578returnfn(t, t2, str);1579}1580});15811582$(document).on('mousedown',function(e) {1583if($(e.target).closest('.data-picker .dropdown-menu').length === 0)//下拉框1584$('.form-content .data-picker>ul').hide();1585if($(e.target).closest('.PS-allPeopleList').length === 0)//人员选择框1586$('.form-content .PS-allPeopleList').remove();1587if($(e.target).closest('.user-picker').length === 0)//人员筛选列表1588$('.user-picker .user-picker-search-list').hide();1589});15901591$(document).on('click', '.form-content .data-picker>span,.form-content .data-picker>input.dropdown',null,function(e) {1592varpicker = $(e.currentTarget).closest('.data-picker');1593varinput = picker.find('input')1594if(!input.attr('readonly')) {1595picker.find('ul').show();1596varval =input.val();1597varul = input.siblings('ul');1598varlis = ul.find('li').removeClass('selected');1599for(vari = 0; i < lis.length; i++) {1600varli =lis.eq(i);1601vartext =li.text();1602if(!val && !text || val ==text) {1603li.addClass('selected');1604
break;1605}1606}1607}1608});16091610$(document).on('click', '.form-content .data-picker li',null,function(e) {1611varpicker = $(this).closest('.data-picker');1612varinput = picker.find('input');1613if(!$(this).hasClass('selected'))1614input.val($(this).text()).change();1615varidxchange = input.data('indexchange');1616if(idxchange) {1617(function() {1618eval(idxchange);1619}).call(input);1620}1621picker.find('ul').hide();1622});1623});1624}
form.js
4.Grid控件的数据保存 Grid控件其实就是一个div，公司的一些页面表单都是动态生成的，表单上面的控件也是动态生成的，所有很多东西都是自己手写的。下面是Grid控件的结构。
<divclass="FM000103-SBCLBJ form-table "><inputdata-datagrid="true"data-formid="FM000034"name="SBCLBJ"type="hidden"/><inputdata-param="init"type="hidden"value="{"ID":"$[ID]","IID":"$(autoid)"}"/><inputdata-param="initsame"type="hidden"value="[]"/><divclass="form-table-header"><divstyle="width:48px;">编辑</div><divstyle="width:50px;">序号</div><divstyle="width:60px;">是否上传</div><divstyle="width:380px;">申报材料内容</div><divstyle="width:80px;">备注</div></div><divclass="form-table-body"><tableclass="table-hover"><colgroupspan="6"><colwidth="48"/><colwidth="50"data-type="RowNumber"/><colwidth="0"data-type="Label"data-index="ID"class="hidden"/><colwidth="0"data-type="Label"data-index="IID"class="hidden"/><colwidth="60"data-type="CheckBox"data-index="CDZL"/><colwidth="380"data-type="TextArea"data-index="ATDESC"/><colwidth="80"data-type="TextArea"data-index="BZ"/></colgroup><tbody><tr><tdclass="form-table-edit"><spanclass="glyphicon glyphicon-edit"aria-hidden="true"></span></td><td>1</td><tdclass="hidden">BM00001141</td><tdclass="hidden">4643</td><td><inputtype="checkbox"value="1"checked="checked"/></td><td>11111</td><td>2222</td></tr><tr><tdclass="form-table-edit"><spanclass="glyphicon glyphicon-edit"aria-hidden="true"></span></td><td>2</td><tdclass="hidden">BM00001141</td><tdclass="hidden">4644</td><td><inputtype="checkbox"value="0"/></td><td>87789789789798789</td><td>333</td></tr></tbody></table></div><divclass="form-table-footer"><buttontype="button"class="btn add-row">新增</button><buttontype="button"class="btn del-row">删除</button></div></div>
下面是完成Grid数据保存的js.
1/**2* 功能：保存用户修改完form标签内容在LocalStorage中。3* 作者：黄金锋 (549387177@qq.com)4* 日期：2015-11-1 11:14:015* 修改：2015-11-19 16:09:006* 版本：version 3.07*/89define(function() {1011//从localStorage中加载数据12functiononload(form) {1314varfh =form_handler;15varp =fh.getParams(form);16if(!p.bimId || !p.formId || !p.iid) {17return;18}19varid = 'FORM_' + DCI.LoginUser.UserId + '_' + p.bimId + '_' + p.formId + '_' +p.iid;2021varformDataDb;22varallControl = $(form).find("input:text[name],textarea[name]");2324//从本地取25varstorage =localStorage.getItem(id);26if(storage !=null)27{28if(confirm("是否加载缓存数据")) {2930varmyData =JSON.parse(storage);31allControl.each(function(i, e) {32varname = $(e).attr("name");33if(myData[name] !=null) {34$(e).val(myData[name]);35$(e).change();36}37});38}39}4041varallGrid = $(form).find(".form-table");42varformId = $(form).data("formid");43varformStorage= localStorage.getItem("FORM_" + formId + "_isGridData");44if(formStorage=="1")45{46if(confirm("是否加载Grid缓存数据"))47{48//给Grid控件赋值49allGrid.each(function(index, element) {50varformName = $(element).find("input:hidden[data-formid]").attr("name");51vaript = $(element).find("input[name]");52vartable = $(element).find("input:hidden[data-formid]").siblings(".form-table-body").find(".table-hover");53varstorageKey = "FORM_" + formId + "_" +formName;54vardata =localStorage.getItem(storageKey);55varmyData =JSON.parse(data);56if(myData !=null) {57alert(data);58varInsertTotal = myData["Total"]["InsertTotal"];59varDelTotal = myData["Total"]["DelTotal"];60varUpdateTotal = myData["Total"]["UpdateTotal"];61vartrIIDIndex = myData["trIIDIndex"]["IID"];62if(InsertTotal > 0) {63for(vari = 0; i < InsertTotal; i++) {64vartr = $('<tr></tr>');65varrow_data = myData["Insert"][i];66table.find('colgroup col').each(function(idx, el) {67vartd = $('<td></td>');68if(idx == 0) {69td.append('<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>');70td.addClass('form-table-edit');71}72else{73varindex = $(el).data('index');74vartype = $(el).data('type')75if(type == "RowNumber") {76varval = row_data["RowNumber"];77td.html(val);78}79if(type == "CheckBox") {80varval =row_data[index];81td.append('<input type="checkbox" value="' + val + '" ' + (val == '1' ? 'checked="checked"' : '') + ' />');82}83if(index && type != "CheckBox") {84td.html(row_data[index]);85}86}87if($(el).attr('width') == '0')88td.addClass('hidden');89td.appendTo(tr);90});91//table.find("tbody").append(tr);92table.append(tr);9394tr.data("insert",true);95ipt.change();96}97}9899if(UpdateTotal > 0) {100101for(vari = 0; i < UpdateTotal; i++) {102varrow_data = myData["Update"][i];103vartrIID = row_data["trIID"];104vartrIndex;105table.find("tr").each(function(idx, ele)106{107variid = $(ele).find("td").eq(trIIDIndex).html();108if(iid ==trIID) {109trIndex =idx;110}111});112113varcells = table.find("tr").eq(trIndex);114table.find('colgroup col').each(function(idx, el)115{116varindex = $(el).data('index');117if(index)118{119vartd = cells.find("td").eq(idx);120vartype = $(el).data('type');121vartest =newObject();122123vartext =row_data[index];124125if(type == 'CheckBox')126{127128varck = td.find('input[type="checkbox"]');129if(text == '1')130ck.prop('checked',true);131else132ck.prop('checked',false);133}134else135{136td.text(text);137}138}139});140cells.data("update",true);141ipt.change();142143}144}145146if(DelTotal > 0) {147for(vari = 0; i < DelTotal; i++) {148varrow_data = myData["Del"][i];149vartrIID = row_data["trIID"];150table.find("tr").each(function(idx,ele) {151variid = $(ele).find("td").eq(trIIDIndex).html();152if( iid==trIID)153{154$(this).css("display", "none");155$(this).data("delete",true);156ipt.change();157}158});159160}161}162163164}165});166}167}168169170171//绑定change事件172allControl.each(function(i, el) {173varname = $(el).attr('name');174if(name) {175$(el).on('change',function() {176onchange(this);177});178}179});180181//保存修改的数据182functiononchange(el) {183varstorage =localStorage.getItem(id);184if(storage ==null) {185formDataDb =newObject();186varkey = $(el).attr("name");187varvalue =$(el).val();188formDataDb[key] =value;189localStorage.setItem(id, JSON.stringify(formDataDb));190}else{191varmyData =JSON.parse(storage);192varkey = $(el).attr("name");193varvalue =$(el).val();194myData[key] =value;195localStorage.setItem(id, JSON.stringify(myData));196}197}198};199200//删除localStorage中的数据201functiononsave(form) {202varfh =form_handler;203varp =fh.getParams(form);204varid = 'FORM_' + DCI.LoginUser.UserId + '_' + p.bimId + '_' + p.formId + '_' +p.iid;205localStorage.removeItem(id);206207208varallGrid = $(form).find(".form-table");209varformId = $(form).data("formid");210allGrid.each(function(index,element) {211varformName = $(element).find("input:hidden[data-formid]").attr("name");212varstorageKey = "FORM_" + formId + "_" +formName;213localStorage.removeItem(storageKey);214});215216localStorage.setItem("FORM_" + formId + "_isGridData",null);217}218219functionongridadd(form, table, data, tr) {220varinputflag = table.closest("div .form-table").find("input:hidden[data-formid]")221varstorageKey;222varformId = $(form).data("formid");;223localStorage.setItem("FORM_" + formId + "_isGridData", "1");224varRowNumber = table.find(".active").children().eq(1).html();225vartrIIDIndex;226vartrIID;227table.find("col").each(function(idx, ele) {228if($(ele).data("index") == "IID") {229trIID = table.find(".active").children().eq(idx).html();230trIIDIndex =idx;231}232});233varInsertObj ={ trIID: trIID, RowNumber: RowNumber };234235varcolumnArr = table.children().find("[data-index]");236if(columnArr) {237columnArr.each(function(index, element) {238varflag = $(element).data("index");239InsertObj[flag] =data[flag];240});241}242243if(inputflag &&trIID)244{245storageKey = "FORM_" + formId + "_" + inputflag.attr("name");246//var mydata = "{'Insert':[{'trIID':'1','ID':'test','IID':'测试'},{'trIID':'2','ID':'test2','IID':'测试2'}],'Update':[{'trIID':'3','ID':'test3','IID':'测试3'},{'trIID':'4','ID':'test4','IID':'测试4'}],'Del':[{'trIID':'1'},{'trIID':'2'}]}";247248vargetLocalStorage =localStorage.getItem(storageKey);249if(getLocalStorage) {250251vardataObj =JSON.parse(getLocalStorage);252varInsertTotal = dataObj["Total"]["InsertTotal"];253254dataObj["Insert"][InsertTotal] =InsertObj;255dataObj["Total"]["InsertTotal"] = InsertTotal + 1;256localStorage.setItem(storageKey, JSON.stringify(dataObj));257258}else259{260varmydata = { Total: { InsertTotal: 1, UpdateTotal: 0, DelTotal: 0}, Insert: [InsertObj], Update: [], Del: [], Notes: { storageKey: storageKey }, trIIDIndex: { IID: trIIDIndex } };261localStorage.setItem(storageKey, JSON.stringify(mydata));262}263}264265}266267functionongridedit(form, table, data, tr) {268269varinputflag = table.closest("div .form-table").find("input:hidden[data-formid]")270varformId = $(form).data("formid");271varstorageKey = "FORM_" + formId + "_" + inputflag.attr("name");272localStorage.setItem("FORM_" + formId + "_isGridData", "1");273varmySourceData ={};274vartrIIDIndex;275table.find("col").each(function(idx, ele)276{277varindex = $(ele).data("index");278vartype = $(ele).data("type");279if(index)280{281if(type == "CheckBox")282{283varval = table.find(".active").children().eq(idx).html();284varvalue =$(val).val();285mySourceData[index] =value;286}287else288{289if(index == "IID")290{291trIIDIndex =idx;292}293mySourceData[index] = table.find(".active").children().eq(idx).html();294}295}296});297298vartrIID = mySourceData["IID"];299varUpdateObj ={ trIID: trIID };300$.extend(UpdateObj, mySourceData);301302vargetLocalStorage =localStorage.getItem(storageKey);303if(getLocalStorage)304{305vardataObj =JSON.parse(getLocalStorage);306varInsertTotal = dataObj["Total"]["InsertTotal"];307varUpdateTotal = dataObj["Total"]["UpdateTotal"];308309310311if(InsertTotal > 0)//新增后在编辑312{313for(vari = 0; i < InsertTotal; i++) {314varrow_data = dataObj["Insert"][i];315if(row_data["trIID"] ==trIID) {316$.extend(dataObj["Insert"][i], UpdateObj);317}318}319}320321if(UpdateTotal > 0)//编辑之后在编辑322{323for(vari = 0; i < UpdateTotal; i++) {324varrow_data = dataObj["Update"][i];325if(row_data["trIID"] ==trIID) {326$.extend(dataObj["Update"][i], UpdateObj);327}328}329}330331varUpdateTotal = dataObj["Total"]["UpdateTotal"];332dataObj["Update"][UpdateTotal] =UpdateObj;333dataObj["Total"]["UpdateTotal"] = UpdateTotal + 1;334335336localStorage.setItem(storageKey, JSON.stringify(dataObj));337}338else339{340341varmydata = { Total: { InsertTotal: 0, UpdateTotal: 1, DelTotal: 0}, Insert: [], Update: [UpdateObj], Del: [], Notes: { storageKey: storageKey }, trIIDIndex: { IID: trIIDIndex } };342localStorage.setItem(storageKey, JSON.stringify(mydata));343}344345346vartestdata =localStorage.getItem(storageKey);347varmyData =JSON.parse(testdata);348if(testdata !=null) {349alert(testdata);350//alert(mydata);351//alert(myData["Total"]["InsertTotal"]);352//alert(myData["Insert"][0]["ID"]);353}354}355356functionongriddel(form, table, tr) {357varinputflag = table.closest("div .form-table").find("input:hidden[data-formid]")358varformId = $(form).data("formid");359varstorageKey = "FORM_" + formId + "_" + inputflag.attr("name");;360localStorage.setItem("FORM_" + formId + "_isGridData", "1");361vartrIIDIndex;362vartrIID;363table.find("col").each(function(idx, ele) {364if($(ele).data("index") == "IID")365{366trIIDIndex =idx;367trIID = tr.find("td").eq(idx).html();368}369});370371varDelObj ={ trIID: trIID };372373vargetLocalStorage =localStorage.getItem(storageKey);374if(getLocalStorage) {375376vardataObj =JSON.parse(getLocalStorage);377varisInsertData =false;378varisUpdateDel =false;379varInsertTotal = dataObj["Total"]["InsertTotal"];380varDelTotal = dataObj["Total"]["DelTotal"];381varUpdateTotal = dataObj["Total"]["UpdateTotal"];382383384if(InsertTotal > 0) {385386for(vari = 0; i < InsertTotal; i++) {387varrow_data = dataObj["Insert"][i];388if(row_data["trIID"] ==trIID) {389isInsertData =true;390dataObj["Insert"][i] =null;391}392}393}394395if(UpdateTotal>0)396{397for(vari = 0; i < UpdateTotal; i++) {398varrow_data = dataObj["Update"][i];399if(row_data["trIID"] ==trIID) {400isUpdateDel =true;401dataObj["Update"][i] =null;402}403}404}405406407if(isInsertData)408{409vartempArr =[];410for(vari = 0; i < InsertTotal; i++) {411if(dataObj["Insert"][i] !=null) {412tempArr[i]=dataObj["Insert"][i];413}414}415416dataObj["Insert"] =tempArr;417dataObj["Total"]["InsertTotal"] = InsertTotal - 1;418}419else420{421422if(isUpdateDel)423{424vartempArr =[];425for(vari = 0; i < InsertTotal; i++) {426if(dataObj["Update"][i] !=null) {427tempArr[i] = dataObj["Update"][i];428}429}430431dataObj["Update"] =tempArr;432dataObj["Total"]["UpdateTotal"] = UpdateTotal - 1;433434}435436dataObj["Del"][DelTotal] =DelObj;437dataObj["Total"]["DelTotal"] = DelTotal + 1;438439}440441localStorage.setItem(storageKey, JSON.stringify(dataObj));442if(dataObj["Total"]["InsertTotal"] == 0 && dataObj["Total"]["UpdateTotal"] == 0 && dataObj["Total"]["DelTotal"] == 0)443{444localStorage.setItem("FORM_" + formId + "_isGridData",null);445}446447448}else449{450varmydata = { Total: { InsertTotal: 0, UpdateTotal: 0, DelTotal: 1}, Insert: [], Update: [], Del: [DelObj], Notes: { storageKey: storageKey }, trIIDIndex: { IID: trIIDIndex } };451localStorage.setItem(storageKey, JSON.stringify(mydata));452}453454}455456return{457onload: onload,458onsave: onsave,459ongridadd: ongridadd,460ongridedit: ongridedit,461ongriddel: ongriddel462}463});