HTML5 LocalStorage 本地存储
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:01 5 * 修改：2015-11-11 16:09:00 6 * 版本：version 2.0 7 */ 8 9 define(function () { 10 11 //从localStorage中加载数据 12 function onload(form) { 13 14 var fh = form_handler; 15 var p = fh.getParams(form); 16 if (!p.bimId || !p.formId || !p.iid) { 17 return; 18 } 19 var id = 'FORM_' + DCI.LoginUser.UserId + '_' + p.bimId + '_' + p.formId + '_' + p.iid; 20 //alert(id); 21 22 var formDataDb; 23 var allControl = $(form).find("input:text[name],textarea[name]"); 24 25 //从本地取 26 var storage = localStorage.getItem(id); 27 if (storage != null) { 28 var myData = JSON.parse(storage); 29 allControl.each(function (i, e) { 30 var name = $(e).attr("name"); 31 if (myData[name] != null) { 32 $(e).val(myData[name]); 33 $(e).change(); 34 } 35 }); 36 } 37 38 39 //绑定change事件 40 allControl.each(function (i, el) { 41 var name = $(el).attr('name'); 42 if (name) { 43 $(el).on('change', function () { 44 onchange(this); 45 }); 46 } 47 }); 48 49 //保存修改的数据 50 function onchange(el) { 51 var storage = localStorage.getItem(id); 52 if (storage == null) { 53 formDataDb = new Object(); 54 var key = $(el).attr("name"); 55 var value = $(el).val(); 56 formDataDb[key] = value; 57 localStorage.setItem(id, JSON.stringify(formDataDb)); 58 } else { 59 var myData = JSON.parse(storage); 60 var key = $(el).attr("name"); 61 var value = $(el).val(); 62 myData[key] = value; 63 localStorage.setItem(id, JSON.stringify(myData)); 64 } 65 } 66 }; 67 68 //删除localStorage中的数据 69 function onsave(form) { 70 var fh = form_handler; 71 var p = fh.getParams(form); 72 var id = 'FORM_' + DCI.LoginUser.UserId + '_' + p.bimId + '_' + p.formId + '_' + p.iid; 73 localStorage.removeItem(id); 74 75 var allGrid = $(form).find(".form-table"); 76 var formId = $(form).data("formid"); 77 allGrid.each(function (index,element) { 78 var formName = $(element).find("input:hidden[data-formid]").attr("name"); 79 var storageKey = "FORM_" + formId + "_" + formName; 80 localStorage.removeItem(storageKey); 81 }); 82 } 83 84 return { 85 onload: onload, 86 onsave: onsave, 87 } 88 });
表单都是自动通过模版生成的，这里附上表单加载需要的form.js.
1 if (!window.form_handler) {//防止重复加载 2 window.f_action = new (function () { //表单事件处理对象，封装表单事件的处理程序 3 4 this.seltime = function () { 5 if ($.fn.datetimepicker) { 6 var $input = $(this).parent().find('input'); 7 if (!$input.attr('readonly')) { 8 var format; 9 if (!$input.data('datetimepicker')) { //添加日期控件 10 format = form_handler.getElDateFormat($input); 11 var minView = 2; 12 if (format.indexOf('i') >= 0) 13 minView = 0; 14 var form = $(this).closest('form'); 15 $input.datetimepicker({ 16 startDate: new Date('100/1/1'), 17 endDate: new Date('10000/1/1'), 18 format: format, 19 language: 'zh-CN', 20 todayHighlight: true, 21 autoclose: true, 22 minView: minView, 23 todayBtn: true, 24 forceParse: false, 25 container: form 26 }); 27 } 28 $input.datetimepicker('show'); 29 30 var val = form_handler.getElDateValue($input, format); 31 if (val) { 32 var date = new Date(val); 33 if (date && date != 'Invalid Date') 34 $input.datetimepicker('update', date); 35 } 36 } 37 } 38 }; 39 40 this.joinControl = function (sender, target, value, isExpression, conditionFields, isDataSource) { 41 if (!$(sender).attr('readonly')) 42 form_handler.joinControl(sender, target, value, isExpression, conditionFields, isDataSource); 43 }; 44 45 this.runMethod = function (sender, method, params) { 46 if (!$(sender).attr('readonly')) { 47 require(['form.run'], function () { 48 var func = eval('form_run.' + method); 49 if (func) { 50 var form = $(sender).parents('form'); 51 var b = form_handler.getParams(form); 52 func.call(sender, form, b, params); 53 } 54 else 55 alert('未实现函数' + method); 56 }); 57 } 58 }; 59 60 this.selectGlossary = function (sender) { 61 var ctrl = $(sender).parent().find('input,textarea'); 62 if (ctrl.length) { 63 if (!ctrl.attr('readonly')) { 64 var field = ctrl.attr('name'); 65 var form = $(sender).closest('form'); 66 var formId = form.data('formid'); 67 var glossaryKey = ctrl.data('glossary'); 68 require(['glossary'], function () { 69 g_action.showGlossary(formId + '_' + field, ctrl, form, glossaryKey, function (ctrl) { 70 var el; 71 if ($(ctrl).css('position') == 'absolute') 72 el = $(ctrl); 73 else //寻找绝对定位的父节点 74 $(ctrl).parentsUntil('form').each(function (i, e) { 75 if ($(e).css('position') == 'absolute') 76 el = $(e); 77 }); 78 if (el) { 79 var position = $(el).position(); 80 return { 81 top: position.top + $(el).height(), 82 left: position.left, 83 }; 84 } 85 }); 86 }); 87 } 88 } 89 }; 90 91 this.runform = function (sender, formtype, formId, variables, controls, iid) { 92 var mainForm = $(sender).closest('form'); 93 if (formtype == 'changeform') { 94 for (var i in controls) { 95 if (controls[i][1].indexOf('$[ID]') > -1 && !form_handler.getElValue(mainForm, controls[i][0])) { 96 alert('找不到记录。'); 97 return; 98 } 99 } 100 } 101 var reg = /\$\[([^[\]]+)\]/g; 102 var data = { 103 }; 104 data.formId = formId; 105 data.formType = formtype; 106 data.dialogId = 'DialogRunForm'; 107 if (iid) { 108 data.iid = iid.replace(reg, function (str, subStr) { 109 return form_handler.getElValue(mainForm, subStr); 110 }); 111 } 112 var url = DefaultUrl + 'Form/DialogRunForm'; 113 showAjaxDialog(data.dialogId, url, data, true, document.body, function (state, data) { 114 if (state == 'ok') { 115 var childForm = $('#DialogRunForm form'); 116 if (formtype == 'addform') { 117 var idVal = childForm.find('[name="ID"]').val(); 118 childForm.data('iid', idVal); 119 childForm.data('bimid', idVal);//兼容3.0 120 form_handler.submitForm(childForm, submitFormCallback, document.body); 121 } 122 else if (formtype == 'changeform') { 123 form_handler.submitForm(childForm, submitFormCallback, document.body); 124 } 125 else if (formtype == 'queryform') { 126 if (childForm.find('table tr.active').length) 127 submitFormCallback(); 128 else 129 alert('请选择一行。'); 130 } 131 } 132 133 function submitFormCallback() { 134 for (var i in controls) { 135 var c = controls[i]; 136 var v = c[1].replace(reg, function (str, subStr) { 137 return form_handler.getElValue(childForm, subStr); 138 }); 139 form_handler.getEl(mainForm, c[0]).val(v); 140 } 141 $('#DialogRunForm').modal('hide'); 142 } 143 }, function (data, btn) { 144 $('#DialogRunForm .modal-title').text($(sender).val()); 145 form_handler.openFormCallback($('#DialogRunForm form')); 146 }); 147 }; 148 149 this.urlChanged = function (scrop, iframeclass) { 150 var url = $(scrop).val(); 151 $('.' + iframeclass).attr('src', url); 152 }; 153 })(); 154 155 window.form_handler = new function () { //表单操作对象，提供接口供外部调用 156 157 var $this = this; 158 159 this.openFormCallback = function (form, dirtyCallback) { 160 161 initElement();//初始化基本元素 162 initCtrl();//初始化控件 163 initModify();//修改痕迹 164 onload();//load事件 165 166 function initElement() { 167 var allControl = $(form).find('input:text,input:checkbox,input:radio,input:hidden,textarea'); 168 allControl.each(function (i, el) { 169 var name = $(el).attr('name'); 170 if (name) { 171 $(el).on('change', function () { 172 onchange(this); 173 }); 174 } 175 }); 176 $(form).find('input:checkbox,input:radio').change(function (e) { 177 if ($(this).is('input:radio')) { 178 var name = $(this).attr('name'); 179 $(form).find('input:radio[name="' + name + '"]').val('0').data('dirty', true); 180 } 181 if ($(this).is(':checked')) 182 $(this).val('1'); 183 else 184 $(this).val('0'); 185 }); 186 $(form).find('input[readonly],textarea[readonly]').keydown(function (evt) { 187 if (evt.keyCode == 8) return false 188 }); 189 //触发事件 190 allControl.each(function (i, el) { 191 if ($(el).attr('data-dirty') == 'true') { 192 $(el).change();//联动 193 } 194 }); 195 } 196 197 function onchange(el) { 198 var d = $(form).data('dirty'); 199 $(form).data('dirty', true);//表单已修改 200 $(el).data('dirty', true);//控件已修改 201 if (!d && dirtyCallback) 202 dirtyCallback(form); 203 } 204 205 function initCtrl() { 206 initGrid(); 207 reqCtrl('.form-img:not(.hidden):not([disabled])', ['form.ctrl.image']); 208 reqCtrl('.richtextbox:not(.hidden)', ['form.ctrl.richtextbox']); 209 reqCtrl('.user-picker:not(.hidden)', ['form.ctrl.userpicker']); 210 reqCtrl('.form-chart:not(.hidden)', ['form.ctrl.chart']); 211 reqCtrl('.popover-toggle:not(.hidden)', ['form.ctrl.popover']); 212 reqCtrl('.Iframe:not(.hidden)', ['form.ctrl.Iframe']); 213 reqCtrl('.form-codeimage:not(.hidden)', ['form.ctrl.codeimg']); 214 } 215 216 function initGrid() { 217 $(form).find('.form-table').each(function (i, cform) { 218 var ipt = $(cform).find('input[name]'); 219 var formId = ipt.data('formid'); 220 var init = JSON.parse($(cform).find('input[data-param="init"]').val()); 221 var initsame = 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); 225 226 if (!$(cform).hasClass('disabled')) { 227 $(cform).on('click', function (event) { 228 if (!$(event.target).is('input[name]')) 229 ipt.click(); 230 }); 231 $(cform).on('click', '.form-table-footer button.add-row', addRow); 232 if (initsame.length) 233 $(cform).on('click', '.form-table-footer button.add-samerow', addRow); 234 else 235 $(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); 238 if (ipt.data('dirty')) { 239 $(cform).find('tr').data('insert', true); 240 } 241 } 242 else { 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 } 247 dataGridTplRender($(cform).find('table')); 248 249 function chkChange() { 250 var $this = $(this); 251 var val = '0'; 252 if ($this.is(':checked')) 253 val = '1'; 254 $this.val(val); 255 var tr = $(this).closest('tr'); 256 tr.data('update', true); 257 ipt.change(); 258 if (window.localStorage) { 259 var table = $this.closest('table'); 260 var name = table.find('colgroup col').eq($this.closest('td').index()).data('index'); 261 var row_data = { 262 }; 263 row_data[name] = val; 264 require(['form.storage'], function (s) { 265 s.ongridedit(form, table, row_data, tr); 266 }); 267 } 268 } 269 270 function selrow() { 271 $(this).siblings().removeClass('active'); 272 $(this).addClass('active'); 273 } 274 275 function scrollTable() { 276 var left = $(this).scrollLeft(); 277 $(this).siblings('.form-table-header').css('margin-left', -left); 278 } 279 280 function editRow(e) { 281 var data = { 282 formId: formId, 283 readOnly: $(cform).hasClass('disabled') ? 1 : 0 284 }; 285 var tr = $(this).closest('tr'); 286 showAjaxDialog('DialogGridRow', DefaultUrl + 'Form/DialogGridRow', data, true, document.body, function (state, data) { 287 if (state == 'ok') { 288 if ($(cform).hasClass('disabled')) { 289 $('#DialogGridRow').modal('hide'); 290 } 291 else if ($this.validateForm($('#DialogGridRow form'))) { 292 var table = tr.closest('table'); 293 var row_data = { 294 }; 295 var cells = tr.find('td'); 296 table.find('colgroup col').each(function (idx, el) { 297 var index = $(el).data('index'); 298 if (index) { 299 var ctrl = $('#DialogGridRow form [name="' + index + '"]'); 300 var td = cells.eq(idx); 301 if (ctrl.length) { 302 var type = $(el).data('type'); 303 var text = ctrl.val(); 304 if (type == 'CheckBox') {//复选框 305 var ck = td.find('input[type="checkbox"]'); 306 ck.val(text); 307 if (text == '1') 308 ck.prop('checked', true); 309 else 310 ck.prop('checked', false); 311 } 312 else { 313 td.text(text); 314 } 315 } 316 var ipt = td.find('input'); 317 if (ipt.length) 318 row_data[index] = ipt.val(); 319 else 320 row_data[index] = td.text(); 321 } 322 }); 323 if (window.form_tpl) { 324 table.find('colgroup col').each(function (idx, el) { 325 if ($(el).data('type') == 'Template') { 326 var tpl = eval('form_tpl.' + $(el).data('tpl')); 327 if (tpl) { 328 cells.eq(idx).html(tpl(row_data, cells.eq(idx - 1).text())); 329 } 330 } 331 }); 332 } 333 if (window.localStorage) 334 require(['form.storage'], function (s) { 335 s.ongridedit(form, table, row_data, tr); 336 }); 337 $('#DialogGridRow').modal('hide'); 338 tr.data('update', true); 339 ipt.change(); 340 tr.click(); 341 } 342 } 343 }, 344 function () { 345 if ($(cform).hasClass('disabled')) 346 $('#DialogGridRow .modal-title').text('查看'); 347 else 348 $('#DialogGridRow .modal-title').text('编辑'); 349 var childForm = $('#DialogGridRow form'); 350 $this.openFormCallback(childForm); 351 //获取列信息 352 var table = tr.parents('table'); 353 table.find('colgroup col').each(function (idx, el) { 354 var td = tr.find('td').eq(idx); 355 var ck = td.find('input[type="checkbox"]'); 356 var value; 357 if (ck.length > 0) value = ck.val(); 358 else value = td.text(); 359 var target = $('#DialogGridRow form [name="' + $(el).data('index') + '"]').val(value); 360 if (target.is(':checkbox')) { 361 if (value == '1') 362 target.attr('checked', 'checked'); 363 else 364 target.removeAttr('checked'); 365 } 366 }); 367 }); 368 } 369 370 function addRow() { 371 var btn = $(this); 372 var selRow = $(cform).find('table tr.active'); 373 if (btn.is('.add-samerow') && !selRow.length) { 374 alert('请选择行。'); 375 return; 376 } 377 var data = { 378 formId: formId 379 }; 380 var table = $(cform).find('table'); 381 showAjaxDialog('DialogGridRow', DefaultUrl + 'Form/DialogGridRow', data, true, document.body, function (state, data) { 382 if (state == 'ok') { 383 var childForm = $('#DialogGridRow form'); 384 var iid = childForm.data('iid'); 385 if (iid) { 386 if ($this.validateForm(childForm)) { 387 var tr = $('<tr></tr>'); 388 var row_data = { 389 }; 390 table.find('colgroup col').each(function (idx, el) { 391 var td = $('<td></td>'); 392 if (idx == 0) { 393 td.append('<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>'); 394 td.addClass('form-table-edit'); 395 } 396 else { 397 var index = $(el).data('index'); 398 if (index) { 399 if (index == 'IID') {//主键 400 row_data['IID'] = iid; 401 td.text(iid); 402 } 403 else if (index == 'ID') { 404 row_data['ID'] = form.data('bimid'); 405 td.text(row_data['ID']); 406 } 407 else { 408 var ctrl = $('#DialogGridRow form [name="' + index + '"]'); 409 if (ctrl.length) { 410 var type = $(el).data('type') 411 var text = ctrl.val(); 412 if (type == 'CheckBox') { 413 var val = text == '1' ? '1' : '0'; 414 td.append('<input type="checkbox" value="' + val + '" ' + (val == '1' ? 'checked="checked"' : '') + ' />'); 415 } 416 else { 417 td.text(text) 418 } 419 row_data[index] = text; 420 } 421 } 422 } 423 } 424 if ($(el).attr('width') == '0') 425 td.addClass('hidden'); 426 td.appendTo(tr); 427 }); 428 if (window.form_tpl) { 429 var cells = tr.find('td'); 430 table.find('colgroup col').each(function (idx, el) { 431 if ($(el).data('type') == 'Template') { 432 var tpl = eval('form_tpl.' + $(el).data('tpl')); 433 cells.eq(idx).html(tpl(row_data, cells.eq(idx - 1).text())); 434 } 435 }); 436 } 437 438 table.append(tr); 439 if (window.localStorage) 440 require(['form.storage'], function (s) { 441 s.ongridadd(form, table, row_data, tr); 442 }); 443 $('#DialogGridRow').modal('hide'); 444 tr.data('insert', true); 445 refreshGridRownum(table); 446 ipt.change(); 447 448 tr.click(); 449 } 450 } 451 } 452 }, function () { 453 $('#DialogGridRow .modal-title').text('新增'); 454 var childForm = $('#DialogGridRow form'); 455 $this.openFormCallback(childForm); 456 $.ajax({ 457 url: DefaultUrl + 'Form/GetChildFormIID', 458 type: 'post', 459 data: { 460 formId: formId 461 }, 462 cache: false, 463 loadingScope: document.body, 464 success: function (r) { 465 var iid = r.Data[0][0]; 466 childForm.data('iid', iid); 467 } 468 }); 469 for (var key in init) { 470 if (key != 'IID') { 471 var value = init[key]; 472 var reg = /\$\[([^[\]]+)\]/g; 473 var value = value.replace(reg, function (str, subStr) { 474 return $this.getElValue(form, subStr); 475 }); 476 childForm.find('[name="' + key + '"]').val(value); 477 } 478 } 479 if (btn.is('.add-samerow')) {//新增相同 480 var table = selRow.closest('table'); 481 var cols = table.find('colgroup col'); 482 $.each(initsame, function () { 483 var key = this; 484 cols.each(function (idx, el) { 485 if ($(el).data('index') == key) { 486 var td = selRow.find('td').eq(idx); 487 var ck = td.find('input[type="checkbox"]'); 488 var value; 489 if (ck.length > 0) value = ck.val(); 490 else value = td.text(); 491 var target = $('#DialogGridRow form [name="' + key + '"]').val(value); 492 if (target.is(':checkbox')) { 493 if (value == '1') 494 target.attr('checked', 'checked'); 495 else 496 target.removeAttr('checked'); 497 } 498 return false; 499 } 500 }); 501 }); 502 } 503 }); 504 } 505 506 function delRow(e) { 507 var table = $(cform).find('table'); 508 var tr = table.find('tr.active'); 509 if (tr.length) { 510 tr.removeClass('active').hide(); 511 if (window.localStorage) { 512 require(['form.storage'], function (s) { 513 s.ongriddel(form, table, tr); 514 }); 515 } 516 tr.data('delete', true); 517 if (tr.data('insert')) 518 tr.remove(); 519 refreshGridRownum($(cform).find('table')); 520 ipt.change(); 521 } 522 else 523 alert('请选择行。'); 524 } 525 }); 526 } 527 528 function reqCtrl(selector, deps) { 529 var ctrls = $(form).find(selector); 530 if (ctrls.length) { 531 require(deps, function (r) { 532 ctrls.each(function () { 533 if (r instanceof Function) 534 r.apply(this); 535 else if (r instanceof Object) 536 r.onload.apply(this); 537 }) 538 }); 539 } 540 } 541 542 function initModify() { 543 544 $(form).mousedown(function (e) { 545 if ($(form).data('readmark-loaded') && $(e.target).is('input:text,input:checkbox,input:hidden,textarea') && $(e.target).data('modified')) { 546 var el = e.target; 547 var name = $(el).attr('name'); 548 if (name) { 549 if (!$(el).data('show-popover')) { 550 $(el).data('show-popover', true); 551 //$(el).data('timer', setTimeout(function (el) { 552 var iid = $(form).data('iid'); 553 var formId = $(form).data('formid'); 554 $(el).data('getting-modifyLog', true); 555 $.ajax({ 556 url: DefaultUrl + 'Form/ModifyLogData', 557 data: { 558 iid: iid, formId: formId, field: name 559 }, 560 cache: false, 561 loadingScope: document.body, 562 success: function (r) { 563 if ($(r).find('ul li').length && $(el).data('show-popover')) { 564 $(form).find('.popover').remove(); 565 $(el).popover({ 566 content: r, 567 html: true, 568 trigger: 'manual', 569 placement: 'left', 570 animation: true, 571 container: $(form), 572 template: '<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 }, 582 complete: function () { 583 $(el).data('getting-modifyLog', false); 584 } 585 }); 586 //}, 100, el)); 587 } 588 } 589 } 590 }); 591 592 $(form).mouseout(function (e) { 593 if ($(form).data('readmark-loaded') && $(e.target).is('input:text,input:checkbox,input:hidden,textarea') && $(e.target).data('modified')) { 594 var el = e.target; 595 if (!$(el).data('getting-modifyLog')) { 596 var name = $(el).attr('name'); 597 if (name) { 598 //var t = $(this).data('timer'); 599 //if (t) 600 // clearTimeout(t); 601 if ($(form).find('.popover').length) { 602 if ($(el).data('show-popover')) { 603 setTimeout(function () { 604 if ($(el).data('show-popover')) { 605 $(el).data('show-popover', false); 606 $(el).popover('destroy'); 607 } 608 }, 100); 609 } 610 } 611 else { 612 $(el).data('show-popover', false); 613 $(el).popover('destroy'); 614 } 615 } 616 } 617 } 618 }); 619 } 620 621 function onload() { 622 if (window.localStorage) 623 require(['form.storage'], function (s) { 624 s.onload(form); 625 }); 626 if ($(form).data('onload')) 627 (function () { 628 eval($(form).data('onload')); 629 }).apply(form); 630 } 631 }; 632 633 function dataGridTplRender(table) { 634 if (table.find('colgroup col[data-type="Template"]').length) { 635 require(['form.tpl'], function () {//模板列 636 var cols = []; 637 var tpls = []; 638 table.find('colgroup col').each(function (idx, el) {//获取列信息 639 cols[idx] = $(el).data('index'); 640 if ($(el).data('type') == 'Template') { 641 var tplStr = $(el).data('tpl'); 642 var tpl = eval('form_tpl.' + tplStr); 643 if (tpl != null) 644 tpls.push({ index: idx, tpl: tpl }); 645 else//告知错误原因 646 alert('模板[' + tplStr + ']没定义。'); 647 } 648 }); 649 if (tpls.length) { 650 table.find('tr').each(function (idx, el) { 651 var row_data = {}; 652 var cells = $(el).find('td'); 653 cells.each(function (idx, el) {//获取行数据 654 if (cols[idx]) { 655 var ipt = $(el).find('input'); 656 if (ipt.length) 657 row_data[cols[idx]] = ipt.val(); 658 else 659 row_data[cols[idx]] = $(el).text(); 660 } 661 }); 662 $.each(tpls, function () { 663 var td = cells.eq(this.index); 664 td.html(this.tpl(row_data, cells.eq(this.index - 1).text())); 665 }); 666 }); 667 } 668 }); 669 } 670 } 671 672 this.joinControl = function (sender, target, value, isExpression, conditionFields, isDataSource) { 673 if (isDataSource) {//数据源 674 $this.getDataSource(sender, value, [target], conditionFields); 675 } 676 else { 677 var result; 678 if ((result = /\$\{substr,([^,]+),(\d+),(\d+)\}\s+([^\s]+)/.exec(value)) != null) {//截取字符串，谁设计的！！！！ 679 var sourceField = result[1]; 680 var startIdx = result[2]; 681 var length = result[3]; 682 var targetField = result[4]; 683 var form = $(sender).closest('form'); 684 var sourceValue = $this.getElValue(form, sourceField.replace('@', '#')); 685 if (sourceValue != null) { 686 $this.getEl(form, targetField).val(sourceValue.substr(parseInt(startIdx), parseInt(length))).change();//联动 687 } 688 } 689 else if ((result = /\$\{toStr,([^,]+),([^,]+)\}/.exec(value)) != null) { //日期格式转换，又是谁设计的！！！ 690 var name = result[1]; 691 var format = result[2]; 692 var form = $(sender).closest('form'); 693 var el = $this.getEl(form, name); 694 if (el.length) { 695 var val = $this.getElDateValue(el); 696 if (val) { 697 var date = new Date(val); 698 var targetValue = $this.getFomatDate(date, format); 699 form.find('[name="' + target + '"]').val(targetValue).change();//联动 700 } 701 } 702 } 703 else { //取值，包括系统值（从服务端）和其它字段值（从客户端），然后计算值 704 var sysName = { 705 }; 706 var reg = /\$\{([^{}]+)\}/g; 707 var i = 0; 708 while ((result = reg.exec(value)) != null) { 709 sysName['[' + i + ']'] = result[1]; 710 i++; 711 } 712 if (i > 0) { //服务端取系统值 713 $.ajax({ 714 url: DefaultUrl + 'Form/GetSysValue', 715 type: 'post', 716 cache: false, 717 data: sysName, 718 success: function (r) { 719 joinControlCallback(sender, target, value, isExpression, r, isDataSource); 720 }, 721 error: function () { 722 alert('取系统值失败！'); 723 } 724 }); 725 } 726 else { 727 joinControlCallback(sender, target, value, isExpression, { 728 }, isDataSource); 729 } 730 } 731 } 732 }; 733 734 function joinControlCallback(sender, target, value, isExpression, sysValue) { 735 try { 736 var form = $(sender).closest('form'); 737 var $target, matches; 738 if (matches = (/([^:]+):item:([^:]+)/gi).exec(target)) 739 $target = getSelectCell(form, matches).cell; 740 else 741 $target = form.find('[name="' + target + '"],[data-name="' + target + '"]'); 742 743 if ($target.length) { 744 var reg = /\$\[([^[\]]+)\]/g; 745 var value = value.replace(reg, function (str, subStr) { 746 if (subStr.substr(0, 1) == '#') { 747 var el = form.find('[name="' + subStr.substr(1) + '"]'); 748 if (el.data('combobox')) 749 return getComboBoxValueText(el).text; 750 } 751 return $this.getElValue(form, subStr); 752 }); 753 reg = /\$\{([^{}]+)\}/g; 754 value = value.replace(reg, function (str, subStr) { 755 return sysValue[subStr]; 756 }); 757 if (isExpression) { 758 value = calcValue(value); 759 } 760 //联动 761 if ($target.is(':text,textarea')) { 762 var ov = $target.val(); 763 if (!(!ov && !value || ov == value)) { 764 $target.val(value); 765 $target.change(); 766 } 767 } 768 else if ($target.is('td')) {//子表的单元格 769 var ov = $target.text(); 770 if (!(!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 } 776 else if ($target.data('codeimg')) {//二维码条形码 777 require(['form.ctrl.codeimg'], function (obj) { 778 obj.changeVal($target, value); 779 }); 780 } 781 } 782 } 783 catch (err) { 784 alert("脚本错误！"); 785 } 786 787 function calcValue(value) { 788 value = value.replace(/toNumber\(\s*\)/, '0').replace(/roundFloat\(\s*,\s*\d+\s*\)/, '0'); 789 value = eval(value); 790 791 if (isNaN(value) || value == null) 792 return ''; 793 if (typeof (value) == 'number') { 794 var str = String(value); 795 if (/\.[0-9]{8}/.test(str))//脚本坑爹的算术运算 796 str = String(roundFloat(value, 2)); 797 return str; 798 } 799 return String(value); 800 } 801 } 802 803 this.getDataSource = function (sender, sourceId, fields, conditionFields, callback) { 804 var form = $(sender).closest('form'); 805 var data = $this.getParams(form); 806 data.sourceId = sourceId; 807 data.fieldName = fields.length > 0 ? fields[0] : null; 808 for (var i in conditionFields) { 809 var f = conditionFields[i]; 810 var value; 811 if (f == 'ID')//后期或者改成服务端处理 812 value = data.bimId; 813 else 814 value = $this.getElValue(form, f); 815 data['F[' + f + ']'] = value; 816 } 817 $.ajax({ 818 url: DefaultUrl + 'Form/GetFormDataSource', 819 type: 'post', 820 cache: false, 821 data: data, 822 loadingScope: document.body, 823 success: function (r) { 824 for (var i in fields) { 825 var control = form.find('[name="' + fields[i] + '"],[data-name="' + fields[i] + '"]'); 826 if (control.data('combobox')) { 827 var ul = control.siblings('ul'); 828 ul.empty(); 829 for (var j in r.Data) { 830 ul.append($('<li></li>').text(r.Data[j][1]).data('value', r.Data[j][0])); 831 } 832 } 833 else if (control.data('datagrid')) {//查询表单才用 834 var hash = { 835 }; 836 for (var i = 0; i < r.Metadata.length; i++) 837 hash[r.Metadata[i].ID] = i; 838 var box = control.closest('.form-table'); 839 var cols = box.find('table colgroup col'); 840 var map = { 841 }; //映射 842 for (var i = 0; i < cols.length; i++) { 843 var name = cols.eq(i).data('index'); 844 if (name && hash[name] != undefined) { 845 map[i] = { 846 idx: hash[name], col: cols.eq(i) 847 }; 848 } 849 else { 850 map[i] = { 851 col: cols.eq(i) 852 }; 853 } 854 } 855 var tb = box.find('table'); 856 tb.find('tr').remove(); 857 for (var i = 0; i < r.Data.length; i++) { 858 var tr = $('<tr></tr>'); 859 var disabled = box.hasClass('disabled'); 860 var disabledStr = disabled ? 'disabled="disabled"' : ''; 861 for (var j = 0; j < cols.length; j++) { 862 var td = $('<td></td>'); 863 if (!disabled && j == 0) { 864 td.addClass('form-table-edit'); 865 td.append('<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>'); 866 } 867 else if (map[j].idx != undefined) { 868 if (cols.eq(j).data('type') == 'CheckBox') { 869 var v = r.Data[i][map[j].idx]; 870 if (v == 1 || v == '1') 871 td.append('<input type="checkbox" value="1" checked="checked" ' + disabledStr + ' />'); 872 else 873 td.append('<input type="checkbox" value="0" ' + disabledStr + ' />') 874 } 875 else { 876 td.text(r.Data[i][map[j].idx]); 877 } 878 } 879 if (map[j].col.attr('width') == 0) 880 td.addClass('hidden'); 881 tr.append(td); 882 } 883 tb.append(tr); 884 } 885 dataGridTplRender(tb); 886 refreshGridRownum(tb); 887 } 888 else if (control.hasClass('form-chart')) {//图表控件 889 var accountId = r.Data.accountid; 890 if (accountId) { 891 var query = {}, j = 0; 892 for (var i = 0; i < r.Data.conditions.length; i++) { 893 var c = r.Data.conditions[i]; 894 if (c.value) { 895 var empty = true, hasCtrl = false; 896 var v = c.value.replace(/\$\[([^[\]$]+)\]/g, function (str, name) { 897 hasCtrl = true; 898 var elv = $this.getElValue(form, name); 899 if (elv) empty = false; 900 return elv; 901 }); 902 if (!(hasCtrl && c.checkNullField == 'true' && empty)) 903 query['filters[' + (j++) + ']'] = v; 904 } 905 } 906 require(['form.ctrl.chart'], function (c) { 907 c.loadChart(control, accountId, query); 908 }); 909 } 910 } 911 else if (control.is('input') || control.is('textarea')) { 912 if (r.Data.length > 0 && r.Data[0].length > 0) { 913 var value = r.Data[0][0] 914 var change = false; 915 if (control.is(':text,textarea')) { 916 var ov = control.val(); 917 if (!(!ov && !value || ov == value)) 918 change = true; 919 } 920 if (change) { 921 control.val(value); 922 control.change(); 923 } 924 } 925 } 926 } 927 if (callback) 928 callback(r); 929 }, 930 error: function () { 931 alert('数据源' + sourceId + '获取失败。'); 932 } 933 }); 934 }; 935 936 this.getEl = function (form, name) { 937 return form.find('[name="' + name + '"]'); 938 }; 939 940 this.getElValue = function (form, name) { //获得元素值 941 var val = ''; 942 var matches; 943 if (matches = (/([^:]+):format:([^:]+)/gi).exec(name)) {//时间格式 944 name = matches[1]; 945 var f = matches[2]; 946 var el = form.find('[name="' + name + '"]'); 947 if (el.hasClass('datetime')) { 948 var dateStr = this.getElDateValue(el); 949 if (dateStr) { 950 var date = new Date(dateStr); 951 val = this.getFomatDate(date, f); 952 } 953 } 954 else { 955 val = el.val(); 956 } 957 } 958 else if (matches = (/([^:]+):item:([^:]+)/gi).exec(name)) { //选中行的值 959 var elInfo = getSelectCell(form, matches); 960 name = elInfo.name; 961 if (elInfo.cell.length) 962 val = elInfo.cell.text(); 963 } 964 else if (matches = (/([^:]+):sum:([^:]+)/gi).exec(name)) { //计算子表列总和 965 name = matches[1]; 966 var colname = matches[2]; 967 var el = form.find('[name="' + name + '"]').parent(); 968 var table = el.find('table'); 969 var idx = -1; 970 var sum = 0; 971 var err = false; 972 table.find('colgroup:first').find('col').each(function (i, e) { 973 if ($(e).data('index') == colname) 974 idx = i; 975 }); 976 if (idx > -1) { 977 table.find('tr').each(function (i, e) { 978 if ($(e).is(':visible')) { 979 var num = $(e).find('td').eq(idx).text(); 980 if (num != null && num != '') { 981 var v = parseFloat(num); 982 if (isNaN(v)) { 983 if (!err) { 984 alert(num + '不是数字'); 985 err = true; 986 } 987 } 988 else 989 sum += v; 990 } 991 } 992 }); 993 } 994 if (err) val = ''; 995 else val = sum.toString(); 996 } 997 else if (matches = /#([^#]+)/.exec(name)) { 998 var el = form.find('[name="' + matches[1] + '"]'); 999 if (el.data('combobox')) 1000 val = getComboBoxValueText(el).text; 1001 } 1002 else { 1003 var el = form.find('[name="' + name + '"]'); 1004 if (el.data('combobox')) 1005 val = getComboBoxValueText(el).value; 1006 else 1007 val = el.val(); 1008 } 1009 if (val != null) 1010 return val; 1011 else return ''; 1012 }; 1013 1014 function getComboBoxValueText(input) { 1015 var val = input.val(); 1016 var ul = input.siblings('ul'); 1017 var lis = ul.find('li'); 1018 for (var i = 0; i < lis.length; i++) { 1019 var li = lis.eq(i) 1020 var text = li.text(); 1021 if (!val && !text || val == text) { 1022 return { 1023 value: li.data('value'), text: text 1024 }; 1025 } 1026 } 1027 return { 1028 value: input.val(), text: input.val() 1029 }; 1030 } 1031 1032 function getSelectCell(form, matches) { 1033 var name = matches[1]; 1034 var colname = matches[2]; 1035 var table = $(form).find('[name="' + name + '"]').closest('.form-table').find('table'); 1036 var tr = table.find('tr.active'); 1037 var cell; 1038 if (tr.length) { 1039 var idx = -1; 1040 table.find('colgroup').find('col').each(function (i, e) { 1041 if ($(e).data('index') == colname) 1042 idx = i; 1043 }); 1044 if (idx > -1) { 1045 cell = tr.find('td').eq(idx); 1046 } 1047 } 1048 return { name: name, cell: cell ? cell : $() }; 1049 } 1050 1051 this.formatValue = function (form, value) { 1052 return value.replace(/\$\[([^[\]$]+)\]/, function (str, name) { 1053 return $this.getElValue(form, name); 1054 }); 1055 } 1056 1057 this.getFomatDate = function (date, format) { 1058 return format.replace(/y+/gi, function (str) { 1059 var year = date.getFullYear().toString(); 1060 if (str.length == 2) 1061 return year.length > 1 ? year.substr(year.length - 2) : year; 1062 return year; 1063 }).replace(/m+/gi, function (str) { 1064 var month = (date.getMonth() + 1).toString(); 1065 if (str.length == 2) 1066 return month.length > 1 ? month : '0' + month; 1067 return month; 1068 }).replace(/d+/gi, function (str) { 1069 var day = date.getDate().toString(); 1070 if (str.length == 2) 1071 return day.length > 1 ? day : '0' + day; 1072 return day; 1073 }).replace(/h+/gi, function (str) { 1074 var hour = date.getHours().toString(); 1075 if (str.length == 2) 1076 return hour.length > 1 ? hour : '0' + hour; 1077 return hour; 1078 }).replace(/i+/gi, function (str) { 1079 var minute = date.getMinutes().toString(); 1080 if (str.length == 2) 1081 return minute.length > 1 ? minute : '0' + minute; 1082 return minute; 1083 }).replace(/s+/gi, function (str) { 1084 var second = date.getSeconds().toString(); 1085 if (str.length == 2) 1086 return second.length > 1 ? second : '0' + second; 1087 return second; 1088 }); 1089 }; 1090 1091 this.getElDateFormat = function (el) { 1092 var format = $(el).data('date-format'); 1093 if (!format) //yyyy-mm-dd hh:ii:ss 1094 format = 'yyyy-m-d'; 1095 else 1096 format = 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'); 1102 return format; 1103 } 1104 1105 this.getElDateValue = function (el, format) { 1106 var value = $(el).val(); 1107 if (value) { 1108 if (!format) { 1109 format = this.getElDateFormat(el); 1110 } 1111 var year, month, day, hour, minute, second; 1112 var replace = []; 1113 var regex = new RegExp('^' + format.replace(/y+|m+|d+|h+|i+|s+/gi, function (str) { 1114 replace.push(str); 1115 return '(\\d+)' 1116 }) + '$'); 1117 var matches = regex.exec(value); 1118 if (matches) { 1119 for (var i = 0; i < replace.length; i++) { 1120 var replaceStr = replace[i]; 1121 var replaceValue = matches[i + 1]; 1122 switch (replaceStr) { 1123 case 'yyyy': year = replaceValue; break; 1124 case 'm': month = replaceValue; break; 1125 case 'd': day = replaceValue; break; 1126 case 'h': hour = replaceValue; break; 1127 case 'i': minute = replaceValue; break; 1128 case 's': second = replaceValue; break; 1129 } 1130 } 1131 return validateDate(parseInt(year, 10), parseInt(month, 10), parseInt(day, 10), parseInt(hour, 10), parseInt(minute, 10), parseInt(second, 10)); 1132 } 1133 } 1134 }; 1135 1136 function validateDate(year, month, day, hour, minute, second) { //校验日期是否合法 1137 if (!isNaN(year) && (year < 100 || year > 9999)) //js:[100,未知] .net,oracle:[1,9999] 1138 return; 1139 if (!isNaN(month) && (month < 1 || month > 12)) 1140 return; 1141 if (!isNaN(day)) { 1142 if (!isNaN(year) && !isNaN(month)) { 1143 var maxDay; 1144 if (month == 2) {//检测闰年 1145 if (year % 400 == 0 || year % 4 == 0 && year % 100 != 0) 1146 maxDay = 29; 1147 else 1148 maxDay = 28; 1149 } 1150 else if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) 1151 maxDay = 31; 1152 else 1153 maxDay = 30; 1154 if (day < 1 || day > maxDay) 1155 return; 1156 } 1157 else 1158 return; 1159 } 1160 if (!isNaN(hour) && (hour < 0 || hour > 23)) 1161 return; 1162 if (!isNaN(minute) && (minute < 0 || minute > 59)) 1163 return; 1164 if (!isNaN(second) && (second < 0 || second > 59)) 1165 return; 1166 1167 return (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 } 1174 1175 this.validateForm = function (form, invalidHandler) { 1176 if ($.fn.validate) { 1177 $(form).data('invalid-handler', invalidHandler) 1178 var validator = $(form).validate({ 1179 showErrors: function (errMap, errList) { 1180 this.defaultShowErrors(); 1181 }, 1182 errorPlacement: function (label, element) { 1183 $(form).append(label); 1184 var el = $(element); 1185 if ($(element).css('position') != 'absolute') { 1186 var closest = element.parentsUntil('form'); 1187 for (var i = closest.length - 1; i >= 0; i--) { 1188 if (closest.eq(i).css('position') == 'absolute') { 1189 el = closest.eq(i); 1190 break; 1191 } 1192 } 1193 } 1194 var left = parseFloat(el.css('left').substring(0, el.css('left').length - 2)); 1195 var top = parseFloat(el.css('top').substring(0, el.css('top').length - 2)); 1196 left = isNaN(left) ? 0 : left; 1197 top = isNaN(top) ? 0 : top; 1198 label.css('position', 'absolute') 1199 .css('left', left) 1200 .css('top', top + $(element).outerHeight()); 1201 1202 }, 1203 invalidHandler: function (ev, validator) { 1204 var invalidHandler = $(form).data('invalid-handler'); 1205 if (invalidHandler) 1206 invalidHandler(ev, validator); 1207 }, 1208 ignore: '' 1209 }); 1210 return validator.form(); 1211 } 1212 return false; 1213 }; 1214 1215 this.submitForm = function (form, callback, maskBody, invalidHandler) { //包含验证 1216 if ($(form).data('beforesave') && (function () { eval($(form).data('beforesave')) }).apply(form) == false) 1217 return; 1218 if ($this.validateForm(form, invalidHandler)) 1219 $this.saveForm(form, callback, maskBody); 1220 }; 1221 1222 this.saveForm = function (form, callback, maskBody, checkRule) { 1223 var data = $this.getFormData(form); 1224 data.checkRule = checkRule; 1225 $.ajax({ 1226 url: DefaultUrl + 'Form/Edit', 1227 data: data, 1228 type: 'POST', 1229 cache: false, 1230 loadingScope: document.body, 1231 success: function (r) { 1232 if (r.result == 'SUCCESS') { 1233 $(form).data('dirty', false); 1234 if (window.localStorage) 1235 require(['form.storage'], function (s) { 1236 s.onsave(form); 1237 }); 1238 if (callback) 1239 callback(r); 1240 } 1241 else if (r.result) { 1242 alert('《' + $(form).data('title') + '》保存失败：' + r.message); 1243 } 1244 else { 1245 DCI.systemRule.showRuleDialog(r, function (dialogId) { 1246 $this.saveForm(form, callback, maskBody, true); 1247 }); 1248 } 1249 }, 1250 error: function () { 1251 alert('《' + $(form).data('title') + '》保存失败。'); 1252 } 1253 }); 1254 }; 1255 1256 this.getFormData = function (form) { 1257 var data = $this.getParams(form); 1258 $this.getGridData(form); //子表 1259 form.find('input:text,input:checkbox,input:radio,input:hidden,textarea').each(function (i, el) { 1260 if ($(el).data('dirty') || $(el).data('submit')) { 1261 var name = $(el).attr('name'); 1262 if (name) { 1263 if ($(el).hasClass('datetime')) { 1264 data['F[' + name + ']'] = $this.getElDateValue($(el)); 1265 } 1266 else if ($(el).data('combobox')) { 1267 var valueText = getComboBoxValueText($(el)); 1268 data['F[' + name + ']'] = valueText.value; 1269 data['F[#' + name + ']'] = valueText.text; 1270 } 1271 else if ($(el).is(':radio')) { 1272 data['F[' + $(el).data('name') + ']'] = $(el).val(); 1273 } 1274 else if ($(el).data('getdata')) { 1275 data['F[' + name + ']'] = $(el).data('getdata')(); 1276 } 1277 else { 1278 data['F[' + name + ']'] = $(el).val(); 1279 } 1280 } 1281 } 1282 }); 1283 return data; 1284 } 1285 1286 this.getGridData = function (form) { 1287 $(form).find('table').each(function (idx, tb) { 1288 var container = $(tb).parents('.form-table'); 1289 var input = container.children('input[name]'); 1290 if (input.data('dirty')) { 1291 var data = { 1292 insert: [], update: [], del: [], idCol: 0, cols: [] 1293 }; 1294 var rowIdCol = -1; //行标识所在列 1295 var sCol = []; //记录要提交的列 1296 $(tb).find('colgroup col').each(function (idx, col) { 1297 var colName = $(col).data('index'); 1298 if (colName) { 1299 if (colName == 'IID') 1300 rowIdCol = idx; 1301 data.cols.push(colName); 1302 sCol[idx] = true; 1303 } 1304 }); 1305 1306 $(tb).find('tr').each(function (idx, tr) { 1307 if ($(tr).data('delete')) { //删除 1308 var rowId = $(tr).find('td').eq(rowIdCol).text(); 1309 data.del.push(rowId); 1310 } 1311 else if ($(tr).data('insert')) { //插入 1312 data.insert.push(getRowData(tr, sCol)); 1313 } 1314 else if ($(tr).data('update')) { //更新 1315 data.update.push(getRowData(tr, sCol)); 1316 } 1317 }); 1318 1319 input.val(JSON.stringify(data)); 1320 } 1321 }); 1322 1323 function getRowData(tr, sCol) { 1324 var data = []; 1325 $(tr).find('td').each(function (idx, el) { 1326 if (sCol[idx]) { 1327 var ipt = $(el).find('input'); 1328 if (ipt.length > 0) { 1329 data.push(ipt.val()) 1330 } 1331 else { 1332 data.push($(el).text()); 1333 } 1334 } 1335 }); 1336 return data; 1337 } 1338 }; 1339 1340 function refreshGridRownum(table) { 1341 var idx = -1; 1342 $(table).find('colgroup:first col').each(function (i, e) { 1343 if ($(e).data('type') == 'RowNumber') { 1344 idx = i; 1345 } 1346 }); 1347 if (idx > -1) { 1348 var rownum = 0; 1349 $(table).find('tr').each(function (i, e) { 1350 if (!$(e).data('delete')) 1351 $(e).find('td').eq(idx).text(++rownum); 1352 }); 1353 } 1354 } 1355 1356 this.getParams = function (form) { 1357 var iid = form.data('iid'); 1358 var bimId = form.data('bimid'); 1359 var formId = form.data('formid'); 1360 var actId = form.data('actid'); 1361 var contextId = form.data('contextid'); 1362 var key = form.data('key'); 1363 return { 1364 iid: iid, bimId: bimId, formId: formId, actId: actId, contextId: contextId, key: key 1365 }; 1366 }; 1367 1368 this.showForm = function (data, callback, closeCallback, loadCallback) { 1369 var fromName = "ShowForm"; 1370 if (data.fromName) fromName = data.fromName;//默认为ShowForm 1371 data.key = data.contextId; 1372 data.dialogId = 'Dialog_' + fromName; 1373 var url = DefaultUrl + 'Form/Dialog_ShowForm'; 1374 showAjaxDialog(data.dialogId, url, data, true, document.body, function (state, data) { 1375 if (state == 'ok') { 1376 if (callback) 1377 callback(data); 1378 } else { 1379 if (closeCallback) 1380 closeCallback(data); 1381 } 1382 }, function (data, btn) { 1383 var showform = $('#Dialog_' + fromName).find('form'); 1384 //if (!showform.data('readonly')) 1385 $this.openFormCallback(showform);//初始化控件 1386 if (loadCallback) 1387 loadCallback(data) 1388 //DCI.systemRule.showRuleDialog_Added(null, btn); 1389 }); 1390 }; 1391 1392 this.showModifyFields = function (form) { 1393 if ($(form).is(':visible') && !$(form).data('readmark-loaded')) { 1394 $(form).data('readmark-loaded', true); 1395 $(form).find('span.readMark').remove(); 1396 var b = $this.getParams(form); 1397 $.ajax({ 1398 url: DefaultUrl + 'Form/GetModifyFields', 1399 data: { 1400 iid: b.iid, formId: b.formId 1401 }, 1402 type: 'post', 1403 loadingScope: document.body, 1404 success: function (r) { 1405 for (var i in r) { 1406 var element = $this.getEl(form, r[i]); 1407 if (element.length && element.is(':visible')) { 1408 element.data('modified', true); 1409 var el = element; 1410 if (element.css('position') != 'absolute') { 1411 var closest = element.parentsUntil('form'); 1412 for (var i = closest.length - 1; i >= 0; i--) { 1413 if (closest.eq(i).css('position') == 'absolute') { 1414 el = closest.eq(i); 1415 break; 1416 } 1417 } 1418 } 1419 var left = parseFloat(el.css('left').substring(0, el.css('left').length - 2)); 1420 var top = parseFloat(el.css('top').substring(0, el.css('top').length - 2)); 1421 left = isNaN(left) ? 0 : left; 1422 top = 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 }, 1430 error: function () { 1431 alert('修改痕迹获取失败。'); 1432 } 1433 }); 1434 } 1435 }; 1436 1437 this.removeModifyMark = function (form) { 1438 $(form).data('readmark-loaded', false); 1439 $(form).find('span.readMark').remove(); 1440 }; 1441 }; 1442 1443 window.toNumber = function (str) { 1444 if (str) 1445 return parseFloat(str); 1446 return 0; 1447 } 1448 1449 window.roundFloat = function (number, digits) { 1450 return Math.round(number * Math.pow(10, digits)) / Math.pow(10, digits); 1451 } 1452 1453 $(function () { 1454 require(['css!form.style']); 1455 require(['jquery.validate'], function () { 1456 $.extend($.validator.messages, { 1457 'required': '这是必填项' 1458 }); 1459 $.validator.addMethod("pattern", function (value, element, param) { 1460 if (!value) { 1461 return true; 1462 } 1463 if (typeof param === "string") { 1464 param = new RegExp("^(?:" + param + ")$"); 1465 } 1466 return param.test(value); 1467 }, "输入的格式不正确"); 1468 1469 $.validator.addMethod("datetime", function (value, element) { 1470 if (!value) 1471 return true; 1472 var val = form_handler.getElDateValue($(element)); 1473 if (val) return true; 1474 return false; 1475 }, "日期时间不正确"); 1476 1477 $.validator.addMethod('MaxNumber', function (value, element, param) { 1478 return compareNumber.call(this, value, element, param, function (a, b) { 1479 if (isNaN(b) || !isNaN(a) && a <= b) 1480 return true; 1481 $(element).data('msg-MaxNumber', '请输入小于或等于' + b + '的数值'); 1482 return false; 1483 }); 1484 }, function (param, element) { 1485 return $(element).data('msg-MaxNumber'); 1486 }); 1487 1488 $.validator.addMethod('MinNumber', function (value, element, param) { 1489 return compareNumber.call(this, value, element, param, function (a, b) { 1490 if (isNaN(b) || !isNaN(a) && a >= b) 1491 return true; 1492 $(element).data('msg-MinNumber', '请输入大于或等于' + b + '的数值'); 1493 return false; 1494 }); 1495 }, function (param, element) { 1496 return $(element).data('msg-MinNumber'); 1497 }); 1498 1499 $.validator.addMethod('DecimalDigits', function (value, element, param) { 1500 if (!value) 1501 return true; 1502 if (isNumber(value)) { 1503 var len = 0; 1504 var dotIdx = value.lastIndexOf('.'); 1505 if (dotIdx > -1) { 1506 var digit = value.substr(dotIdx + 1); 1507 var zEnd = 0; 1508 for (var i = digit.length - 1; i >= 0; i--) { 1509 if (digit[i] == '0') zEnd++; 1510 else break; 1511 } 1512 len = digit.length - zEnd; 1513 } 1514 if (len <= param) 1515 return true; 1516 } 1517 return false; 1518 }, '请输入小数最多精确到{0}位的数值'); 1519 1520 $.validator.addMethod('MaxDatetime', function (value, element, param) { 1521 return compareDateTime.call(this, value, element, param, function (a, b, str) { 1522 if (b == 'Invalid Date' || a != 'Invalid Date' && a <= b) 1523 return true; 1524 $(element).data('msg-MaxDatetime', '请输入小于或等于' + str + '的日期时间'); 1525 }); 1526 }, function (param, element) { 1527 return $(element).data('msg-MaxDatetime'); 1528 }); 1529 1530 $.validator.addMethod('MinDatetime', function (value, element, param) { 1531 return compareDateTime.call(this, value, element, param, function (a, b, str) { 1532 if (b == 'Invalid Date' || a != 'Invalid Date' && a >= b) 1533 return true; 1534 $(element).data('msg-MinDatetime', '请输入大于或等于' + str + '的日期时间'); 1535 }); 1536 }, function (param, element) { 1537 return $(element).data('msg-MinDatetime'); 1538 }); 1539 1540 function isNumber(value) { 1541 return /^[0-9]+(?:\.[0-9]+){0,1}$/.test(value); 1542 } 1543 1544 function compareNumber(value, element, param, fn) { 1545 if (!value) 1546 return true; 1547 var n = isNumber(value) ? parseFloat(value) : NaN; 1548 var n2 = NaN; 1549 if (typeof param === 'number') { 1550 n2 = param; 1551 } 1552 else if (typeof param === 'string') { 1553 var m = /\$\[([^[\]]+)\]/.exec(param); 1554 if (m) { 1555 var form = $(element).closest('form'); 1556 var relVal = form_handler.getElValue(form, m[1]); 1557 n2 = isNumber(relVal) ? parseFloat(relVal) : NaN; 1558 } 1559 } 1560 return fn(n, n2); 1561 } 1562 1563 function compareDateTime(value, element, param, fn) { 1564 if (!value) 1565 return true; 1566 var t = new Date(form_handler.getElDateValue($(element))), t2, str; 1567 var m = /\$\[([^[\]]+)\]/.exec(param); 1568 if (m) { 1569 var form = $(element).closest('form'); 1570 var relEl = form_handler.getEl(form, m[1]); 1571 t2 = new Date(form_handler.getElDateValue(relEl)); 1572 str = relEl.val(); 1573 } 1574 else { 1575 t2 = new Date(param); 1576 str = form_handler.getFomatDate(t2, form_handler.getElDateFormat($(element))); 1577 } 1578 return fn(t, t2, str); 1579 } 1580 }); 1581 1582 $(document).on('mousedown', function (e) { 1583 if ($(e.target).closest('.data-picker .dropdown-menu').length === 0) //下拉框 1584 $('.form-content .data-picker>ul').hide(); 1585 if ($(e.target).closest('.PS-allPeopleList').length === 0) //人员选择框 1586 $('.form-content .PS-allPeopleList').remove(); 1587 if ($(e.target).closest('.user-picker').length === 0)//人员筛选列表 1588 $('.user-picker .user-picker-search-list').hide(); 1589 }); 1590 1591 $(document).on('click', '.form-content .data-picker>span,.form-content .data-picker>input.dropdown', null, function (e) { 1592 var picker = $(e.currentTarget).closest('.data-picker'); 1593 var input = picker.find('input') 1594 if (!input.attr('readonly')) { 1595 picker.find('ul').show(); 1596 var val = input.val(); 1597 var ul = input.siblings('ul'); 1598 var lis = ul.find('li').removeClass('selected'); 1599 for (var i = 0; i < lis.length; i++) { 1600 var li = lis.eq(i); 1601 var text = li.text(); 1602 if (!val && !text || val == text) { 1603 li.addClass('selected'); 1604 break; 1605 } 1606 } 1607 } 1608 }); 1609 1610 $(document).on('click', '.form-content .data-picker li', null, function (e) { 1611 var picker = $(this).closest('.data-picker'); 1612 var input = picker.find('input'); 1613 if (!$(this).hasClass('selected')) 1614 input.val($(this).text()).change(); 1615 var idxchange = input.data('indexchange'); 1616 if (idxchange) { 1617 (function () { 1618 eval(idxchange); 1619 }).call(input); 1620 } 1621 picker.find('ul').hide(); 1622 }); 1623 }); 1624 }
4.Grid控件的数据保存
Grid控件其实就是一个div，公司的一些页面表单都是动态生成的，表单上面的控件也是动态生成的，所有很多东西都是自己手写的。下面是Grid控件的结构。
<div class="FM000103-SBCLBJ form-table "> <input data-datagrid="true" data-formid="FM000034" name="SBCLBJ" type="hidden" /> <input data-param="init" type="hidden" value="{"ID":"$[ID]","IID":"$(autoid)"}" /> <input data-param="initsame" type="hidden" value="[]" /> <div class="form-table-header"> <div style="width:48px;"> 编辑 </div> <div style="width:50px;"> 序号 </div> <div style="width:60px;"> 是否上传 </div> <div style="width:380px;"> 申报材料内容 </div> <div style="width:80px;"> 备注 </div> </div> <div class="form-table-body"> <table class="table-hover"> <colgroup span="6"> <col width="48" /> <col width="50" data-type="RowNumber" /> <col width="0" data-type="Label" data-index="ID" class="hidden" /> <col width="0" data-type="Label" data-index="IID" class="hidden" /> <col width="60" data-type="CheckBox" data-index="CDZL" /> <col width="380" data-type="TextArea" data-index="ATDESC" /> <col width="80" data-type="TextArea" data-index="BZ" /> </colgroup> <tbody> <tr> <td class="form-table-edit"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></td> <td>1</td> <td class="hidden">BM00001141</td> <td class="hidden">4643</td> <td><input type="checkbox" value="1" checked="checked" /></td> <td>11111</td> <td>2222</td> </tr> <tr> <td class="form-table-edit"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></td> <td>2</td> <td class="hidden">BM00001141</td> <td class="hidden">4644</td> <td><input type="checkbox" value="0" /></td> <td>87789789789798789</td> <td>333</td> </tr> </tbody> </table> </div> <div class="form-table-footer"> <button type="button" class="btn add-row">新增</button> <button type="button" class="btn del-row">删除</button> </div> </div>
下面是完成Grid数据保存的js.
1 /** 2 * 功能：保存用户修改完form标签内容在LocalStorage中。 3 * 作者：黄金锋 (549387177@qq.com) 4 * 日期：2015-11-1 11:14:01 5 * 修改：2015-11-19 16:09:00 6 * 版本：version 3.0 7 */ 8 9 define(function () { 10 11 //从localStorage中加载数据 12 function onload(form) { 13 14 var fh = form_handler; 15 var p = fh.getParams(form); 16 if (!p.bimId || !p.formId || !p.iid) { 17 return; 18 } 19 var id = 'FORM_' + DCI.LoginUser.UserId + '_' + p.bimId + '_' + p.formId + '_' + p.iid; 20 21 var formDataDb; 22 var allControl = $(form).find("input:text[name],textarea[name]"); 23 24 //从本地取 25 var storage = localStorage.getItem(id); 26 if (storage != null) 27 { 28 if (confirm("是否加载缓存数据")) { 29 30 var myData = JSON.parse(storage); 31 allControl.each(function (i, e) { 32 var name = $(e).attr("name"); 33 if (myData[name] != null) { 34 $(e).val(myData[name]); 35 $(e).change(); 36 } 37 }); 38 } 39 } 40 41 var allGrid = $(form).find(".form-table"); 42 var formId = $(form).data("formid"); 43 var formStorage= localStorage.getItem("FORM_" + formId + "_isGridData"); 44 if (formStorage=="1") 45 { 46 if (confirm("是否加载Grid缓存数据")) 47 { 48 //给Grid控件赋值 49 allGrid.each(function (index, element) { 50 var formName = $(element).find("input:hidden[data-formid]").attr("name"); 51 var ipt = $(element).find("input[name]"); 52 var table = $(element).find("input:hidden[data-formid]").siblings(".form-table-body").find(".table-hover"); 53 var storageKey = "FORM_" + formId + "_" + formName; 54 var data = localStorage.getItem(storageKey); 55 var myData = JSON.parse(data); 56 if (myData != null) { 57 alert(data); 58 var InsertTotal = myData["Total"]["InsertTotal"]; 59 var DelTotal = myData["Total"]["DelTotal"]; 60 var UpdateTotal = myData["Total"]["UpdateTotal"]; 61 var trIIDIndex = myData["trIIDIndex"]["IID"]; 62 if (InsertTotal > 0) { 63 for (var i = 0; i < InsertTotal; i++) { 64 var tr = $('<tr></tr>'); 65 var row_data = myData["Insert"][i]; 66 table.find('colgroup col').each(function (idx, el) { 67 var td = $('<td></td>'); 68 if (idx == 0) { 69 td.append('<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>'); 70 td.addClass('form-table-edit'); 71 } 72 else { 73 var index = $(el).data('index'); 74 var type = $(el).data('type') 75 if (type == "RowNumber") { 76 var val = row_data["RowNumber"]; 77 td.html(val); 78 } 79 if (type == "CheckBox") { 80 var val = row_data[index]; 81 td.append('<input type="checkbox" value="' + val + '" ' + (val == '1' ? 'checked="checked"' : '') + ' />'); 82 } 83 if (index && type != "CheckBox") { 84 td.html(row_data[index]); 85 } 86 } 87 if ($(el).attr('width') == '0') 88 td.addClass('hidden'); 89 td.appendTo(tr); 90 }); 91 //table.find("tbody").append(tr); 92 table.append(tr); 93 94 tr.data("insert", true); 95 ipt.change(); 96 } 97 } 98 99 if (UpdateTotal > 0) { 100 101 for (var i = 0; i < UpdateTotal; i++) { 102 var row_data = myData["Update"][i]; 103 var trIID = row_data["trIID"]; 104 var trIndex; 105 table.find("tr").each(function (idx, ele) 106 { 107 var iid = $(ele).find("td").eq(trIIDIndex).html(); 108 if (iid == trIID) { 109 trIndex = idx; 110 } 111 }); 112 113 var cells = table.find("tr").eq(trIndex); 114 table.find('colgroup col').each(function (idx, el) 115 { 116 var index = $(el).data('index'); 117 if (index) 118 { 119 var td = cells.find("td").eq(idx); 120 var type = $(el).data('type'); 121 var test =new Object(); 122 123 var text = row_data[index]; 124 125 if (type == 'CheckBox') 126 { 127 128 var ck = td.find('input[type="checkbox"]'); 129 if (text == '1') 130 ck.prop('checked', true); 131 else 132 ck.prop('checked', false); 133 } 134 else 135 { 136 td.text(text); 137 } 138 } 139 }); 140 cells.data("update", true); 141 ipt.change(); 142 143 } 144 } 145 146 if (DelTotal > 0) { 147 for (var i = 0; i < DelTotal; i++) { 148 var row_data = myData["Del"][i]; 149 var trIID = row_data["trIID"]; 150 table.find("tr").each(function (idx,ele) { 151 var iid = $(ele).find("td").eq(trIIDIndex).html(); 152 if ( iid== trIID) 153 { 154 $(this).css("display", "none"); 155 $(this).data("delete", true); 156 ipt.change(); 157 } 158 }); 159 160 } 161 } 162 163 164 } 165 }); 166 } 167 } 168 169 170 171 //绑定change事件 172 allControl.each(function (i, el) { 173 var name = $(el).attr('name'); 174 if (name) { 175 $(el).on('change', function () { 176 onchange(this); 177 }); 178 } 179 }); 180 181 //保存修改的数据 182 function onchange(el) { 183 var storage = localStorage.getItem(id); 184 if (storage == null) { 185 formDataDb = new Object(); 186 var key = $(el).attr("name"); 187 var value = $(el).val(); 188 formDataDb[key] = value; 189 localStorage.setItem(id, JSON.stringify(formDataDb)); 190 } else { 191 var myData = JSON.parse(storage); 192 var key = $(el).attr("name"); 193 var value = $(el).val(); 194 myData[key] = value; 195 localStorage.setItem(id, JSON.stringify(myData)); 196 } 197 } 198 }; 199 200 //删除localStorage中的数据 201 function onsave(form) { 202 var fh = form_handler; 203 var p = fh.getParams(form); 204 var id = 'FORM_' + DCI.LoginUser.UserId + '_' + p.bimId + '_' + p.formId + '_' + p.iid; 205 localStorage.removeItem(id); 206 207 208 var allGrid = $(form).find(".form-table"); 209 var formId = $(form).data("formid"); 210 allGrid.each(function (index,element) { 211 var formName = $(element).find("input:hidden[data-formid]").attr("name"); 212 var storageKey = "FORM_" + formId + "_" + formName; 213 localStorage.removeItem(storageKey); 214 }); 215 216 localStorage.setItem("FORM_" + formId + "_isGridData", null); 217 } 218 219 function ongridadd(form, table, data, tr) { 220 var inputflag = table.closest("div .form-table").find("input:hidden[data-formid]") 221 var storageKey; 222 var formId = $(form).data("formid");; 223 localStorage.setItem("FORM_" + formId + "_isGridData", "1"); 224 var RowNumber = table.find(".active").children().eq(1).html(); 225 var trIIDIndex; 226 var trIID; 227 table.find("col").each(function (idx, ele) { 228 if ($(ele).data("index") == "IID") { 229 trIID = table.find(".active").children().eq(idx).html(); 230 trIIDIndex = idx; 231 } 232 }); 233 var InsertObj = { trIID: trIID, RowNumber: RowNumber }; 234 235 var columnArr = table.children().find("[data-index]"); 236 if (columnArr) { 237 columnArr.each(function (index, element) { 238 var flag = $(element).data("index"); 239 InsertObj[flag] = data[flag]; 240 }); 241 } 242 243 if (inputflag && trIID) 244 { 245 storageKey = "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'}]}"; 247 248 var getLocalStorage = localStorage.getItem(storageKey); 249 if (getLocalStorage) { 250 251 var dataObj = JSON.parse(getLocalStorage); 252 var InsertTotal = dataObj["Total"]["InsertTotal"]; 253 254 dataObj["Insert"][InsertTotal] = InsertObj; 255 dataObj["Total"]["InsertTotal"] = InsertTotal + 1; 256 localStorage.setItem(storageKey, JSON.stringify(dataObj)); 257 258 } else 259 { 260 var mydata = { Total: { InsertTotal: 1, UpdateTotal: 0, DelTotal: 0 }, Insert: [InsertObj], Update: [], Del: [], Notes: { storageKey: storageKey }, trIIDIndex: { IID: trIIDIndex } }; 261 localStorage.setItem(storageKey, JSON.stringify(mydata)); 262 } 263 } 264 265 } 266 267 function ongridedit(form, table, data, tr) { 268 269 var inputflag = table.closest("div .form-table").find("input:hidden[data-formid]") 270 var formId = $(form).data("formid"); 271 var storageKey = "FORM_" + formId + "_" + inputflag.attr("name"); 272 localStorage.setItem("FORM_" + formId + "_isGridData", "1"); 273 var mySourceData = {}; 274 var trIIDIndex; 275 table.find("col").each(function (idx, ele) 276 { 277 var index = $(ele).data("index"); 278 var type = $(ele).data("type"); 279 if (index) 280 { 281 if (type == "CheckBox") 282 { 283 var val = table.find(".active").children().eq(idx).html(); 284 var value =$(val).val(); 285 mySourceData[index] = value; 286 } 287 else 288 { 289 if (index == "IID") 290 { 291 trIIDIndex = idx; 292 } 293 mySourceData[index] = table.find(".active").children().eq(idx).html(); 294 } 295 } 296 }); 297 298 var trIID = mySourceData["IID"]; 299 var UpdateObj = { trIID: trIID }; 300 $.extend(UpdateObj, mySourceData); 301 302 var getLocalStorage = localStorage.getItem(storageKey); 303 if (getLocalStorage) 304 { 305 var dataObj = JSON.parse(getLocalStorage); 306 var InsertTotal = dataObj["Total"]["InsertTotal"]; 307 var UpdateTotal = dataObj["Total"]["UpdateTotal"]; 308 309 310 311 if (InsertTotal > 0)//新增后在编辑 312 { 313 for (var i = 0; i < InsertTotal; i++) { 314 var row_data = dataObj["Insert"][i]; 315 if (row_data["trIID"] == trIID) { 316 $.extend(dataObj["Insert"][i], UpdateObj); 317 } 318 } 319 } 320 321 if (UpdateTotal > 0)//编辑之后在编辑 322 { 323 for (var i = 0; i < UpdateTotal; i++) { 324 var row_data = dataObj["Update"][i]; 325 if (row_data["trIID"] == trIID) { 326 $.extend(dataObj["Update"][i], UpdateObj); 327 } 328 } 329 } 330 331 var UpdateTotal = dataObj["Total"]["UpdateTotal"]; 332 dataObj["Update"][UpdateTotal] = UpdateObj; 333 dataObj["Total"]["UpdateTotal"] = UpdateTotal + 1; 334 335 336 localStorage.setItem(storageKey, JSON.stringify(dataObj)); 337 } 338 else 339 { 340 341 var mydata = { Total: { InsertTotal: 0, UpdateTotal: 1, DelTotal: 0 }, Insert: [], Update: [UpdateObj], Del: [], Notes: { storageKey: storageKey }, trIIDIndex: { IID: trIIDIndex } }; 342 localStorage.setItem(storageKey, JSON.stringify(mydata)); 343 } 344 345 346 var testdata = localStorage.getItem(storageKey); 347 var myData = JSON.parse(testdata); 348 if (testdata != null) { 349 alert(testdata); 350 //alert(mydata); 351 //alert(myData["Total"]["InsertTotal"]); 352 //alert(myData["Insert"][0]["ID"]); 353 } 354 } 355 356 function ongriddel(form, table, tr) { 357 var inputflag = table.closest("div .form-table").find("input:hidden[data-formid]") 358 var formId = $(form).data("formid"); 359 var storageKey = "FORM_" + formId + "_" + inputflag.attr("name");; 360 localStorage.setItem("FORM_" + formId + "_isGridData", "1"); 361 var trIIDIndex; 362 var trIID; 363 table.find("col").each(function (idx, ele) { 364 if ($(ele).data("index") == "IID") 365 { 366 trIIDIndex = idx; 367 trIID = tr.find("td").eq(idx).html(); 368 } 369 }); 370 371 var DelObj = { trIID: trIID }; 372 373 var getLocalStorage = localStorage.getItem(storageKey); 374 if (getLocalStorage) { 375 376 var dataObj = JSON.parse(getLocalStorage); 377 var isInsertData = false; 378 var isUpdateDel = false; 379 var InsertTotal = dataObj["Total"]["InsertTotal"]; 380 var DelTotal = dataObj["Total"]["DelTotal"]; 381 var UpdateTotal = dataObj["Total"]["UpdateTotal"]; 382 383 384 if (InsertTotal > 0) { 385 386 for (var i = 0; i < InsertTotal; i++) { 387 var row_data = dataObj["Insert"][i]; 388 if (row_data["trIID"] == trIID) { 389 isInsertData = true; 390 dataObj["Insert"][i] = null; 391 } 392 } 393 } 394 395 if (UpdateTotal>0) 396 { 397 for (var i = 0; i < UpdateTotal; i++) { 398 var row_data = dataObj["Update"][i]; 399 if (row_data["trIID"] == trIID) { 400 isUpdateDel = true; 401 dataObj["Update"][i] = null; 402 } 403 } 404 } 405 406 407 if (isInsertData) 408 { 409 var tempArr = []; 410 for (var i = 0; i < InsertTotal; i++) { 411 if (dataObj["Insert"][i] != null) { 412 tempArr[i]=dataObj["Insert"][i]; 413 } 414 } 415 416 dataObj["Insert"] = tempArr; 417 dataObj["Total"]["InsertTotal"] = InsertTotal - 1; 418 } 419 else 420 { 421 422 if (isUpdateDel) 423 { 424 var tempArr = []; 425 for (var i = 0; i < InsertTotal; i++) { 426 if (dataObj["Update"][i] != null) { 427 tempArr[i] = dataObj["Update"][i]; 428 } 429 } 430 431 dataObj["Update"] = tempArr; 432 dataObj["Total"]["UpdateTotal"] = UpdateTotal - 1; 433 434 } 435 436 dataObj["Del"][DelTotal] = DelObj; 437 dataObj["Total"]["DelTotal"] = DelTotal + 1; 438 439 } 440 441 localStorage.setItem(storageKey, JSON.stringify(dataObj)); 442 if (dataObj["Total"]["InsertTotal"] == 0 && dataObj["Total"]["UpdateTotal"] == 0 && dataObj["Total"]["DelTotal"] == 0) 443 { 444 localStorage.setItem("FORM_" + formId + "_isGridData", null); 445 } 446 447 448 } else 449 { 450 var mydata = { Total: { InsertTotal: 0, UpdateTotal: 0, DelTotal: 1 }, Insert: [], Update: [], Del: [DelObj], Notes: { storageKey: storageKey }, trIIDIndex: { IID: trIIDIndex } }; 451 localStorage.setItem(storageKey, JSON.stringify(mydata)); 452 } 453 454 } 455 456 return { 457 onload: onload, 458 onsave: onsave, 459 ongridadd: ongridadd, 460 ongridedit: ongridedit, 461 ongriddel: ongriddel 462 } 463 });
