之前有講到過數據字典，什么是數據字典，用來干啥的，這個不細說了，今天來說說如何實現數據字典功能
無非就是維護數據字典，對數據字典對象進行增刪改成，曾經我寫過一個頁面跳轉形式的，十分簡單，不說了，今天用JS來實現，當然JS也要面向對象，不論是屬性還是函數，都要當成對象來對待！
先來看看數據庫表結構，根據上次的有所修改，大致如下：
CREATE TABLE `data_dict` ( `id` int(11) NOT NULL AUTO_INCREMENT, `type_name` varchar(64) COLLATE utf8_unicode_ci NOT NULL COMMENT '數據字典類型名稱', `type_code` varchar(64) COLLATE utf8_unicode_ci DEFAULT NULL COMMENT '數據字典類型代碼', `ddkey` varchar(6) COLLATE utf8_unicode_ci NOT NULL COMMENT '數據鍵', `ddvalue` varchar(12) COLLATE utf8_unicode_ci NOT NULL COMMENT '數據值', `last_modify_user_id` varchar(20) COLLATE utf8_unicode_ci NOT NULL COMMENT '最后一個修改該記錄的系統管理員userid', `create_time` datetime NOT NULL, `update_time` datetime NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=113 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci COMMENT='數據字典表';
好，那再來看看頁面的展現形式
1：數據字典類型下拉框
2：如果數據字典類型沒有的話，則通過此兩個文本框新建輸入（下拉框與文本框同時存在則以下拉框的數據字典類型為主來進行添加或者修改）
3，4：數據字典對於的key，和值，比如 {"1":"boy"，"0":"girl"}
5：如果通過按鈕7新增加一行，則提交即為 增加，如果在頁面上直接修改，則 更新原來數據
6：刪除數據字典，刪除后動態刷新列表
7：新增一行空數據
8：手動刷新列表
基本驗證就不多說了，詳細可以去博客查看JS（文章底部“閱讀原文”）
再來說說面向對象的寫法，其實很簡單，現在很多人都會采用這樣的寫法，但是很多人嫌麻煩，不會這么做，其實這樣很有用，以對象來寫，並且加載JS后，代碼可以做到模塊化通用化可供其他頁面的JS來調用，非常方便
1 var DataDict = function () { 2 3 // 數據字典Form 4 var formDataDictValidation = function() { 5 // for more info visit the official plugin documentation: 6 // http://docs.jquery.com/Plugins/Validation 7 8 var formDataDict = $('#form_data_dict'); 9 var errorDataDict = $('.alert-danger', formDataDict); 10 var successDataDict = $('.alert-success', formDataDict); 11 12 //IMPORTANT: update CKEDITOR textarea with actual content before submit 13 // formDataDict.on('submit', function() { 14 // for(var instanceName in CKEDITOR.instances) { 15 // CKEDITOR.instances[instanceName].updateElement(); 16 // } 17 // }) 18 19 // 自定義驗證，文本框中的數據字典類型是否已經存在，如果存在則提示下拉框中的即可 20 jQuery.validator.addMethod("isTypeNameExist", function(value, element) { 21 var typeName = $("#typeName").val(); 22 var flag = true; 23 $.ajax({ 24 url: $("#hdnContextPath").val() + "/dataDict/isTypeNameExist.action", 25 type: "POST", 26 async: false, 27 data: {"typeName": typeName}, 28 success: function(data) { 29 if(data.status == 200 && data.msg == "OK") { 30 if (data.data) { 31 flag = false; 32 } else { 33 flag = true; 34 } 35 } else { 36 console.log(JSON.stringify(data)); 37 } 38 } 39 }); 40 41 return flag; 42 }, "類型名稱已存在，請選擇下拉框中的數據字典類型"); 43 44 // 添加自定義驗證，下拉框和文本框中只要有一個即可，如果都存在，則以下拉框為主 45 jQuery.validator.addMethod("typeNameRequired", function(value, element) { 46 var typeNameList = $("#typeNameList").val(); 47 var typeName = $("#typeName").val(); 48 49 return ( typeNameList != "" || typeName != ""); 50 }, "請確保數據字典類型下拉框或者文本框必須有一個不為空"); 51 52 53 // 自定義驗證 typeCode 在下拉框有值的時候可以為空，在下拉框無值得時候必填 54 jQuery.validator.addMethod("typeCodeRequired", function(value, element) { 55 var typeNameList = $("#typeNameList").val(); 56 var typeCode = $("#typeCode").val(); 57 58 return ( typeNameList != "" || typeCode != ""); 59 }, "數據字典類型列表下拉框為空時，類型代碼必填"); 60 61 // 自定義驗證，文本框中的數據字典code是否已經存在，如果存在則提示下拉框中的即可 62 jQuery.validator.addMethod("isTypeCodeExist", function(value, element) { 63 var typeCode = $("#typeCode").val(); 64 var flag = true; 65 $.ajax({ 66 url: $("#hdnContextPath").val() + "/dataDict/isTypeCodeExist.action", 67 type: "POST", 68 async: false, 69 data: {"typeCode": typeCode}, 70 success: function(data) { 71 if(data.status == 200 && data.msg == "OK") { 72 if (data.data) { 73 flag = false; 74 } else { 75 flag = true; 76 } 77 } else { 78 console.log(JSON.stringify(data)); 79 } 80 } 81 }); 82 83 return flag; 84 }, "類型代碼已存在，請選擇下拉框中的數據字典類型即可"); 85 86 87 // 表單驗證 88 formDataDict.validate({ 89 errorElement: 'span', //default input error message container 90 errorClass: 'help-block help-block-error', // default input error message class 91 focusInvalid: false, // do not focus the last invalid input 92 ignore: "", // validate all fields including form hidden input 93 rules: { 94 typeName: { 95 rangelength: [2,20], 96 typeNameRequired: true, 97 isTypeNameExist: true 98 }, 99 typeNameList: { 100 typeNameRequired: true 101 }, 102 typeCode: { 103 rangelength: [2,20], 104 typeCodeRequired: true, 105 isTypeCodeExist: true 106 } 107 }, 108 messages: { 109 typeName: { 110 rangelength: "數據字典類型名稱長度必須介於 2 和 20 之間" 111 }, 112 typeCode: { 113 rangelength: "數據字典類型代碼長度必須介於 2 和 20 之間" 114 } 115 }, 116 117 invalidHandler: function (event, validator) { //display error alert on form submit 118 successDataDict.hide(); 119 errorDataDict.show(); 120 App.scrollTo(errorDataDict, -200); 121 }, 122 123 highlight: function (element) { // hightlight error inputs 124 $(element) 125 .closest('.form-group').addClass('has-error'); // set error class to the control group 126 }, 127 128 unhighlight: function (element) { // revert the change done by hightlight 129 $(element) 130 .closest('.form-group').removeClass('has-error'); // set error class to the control group 131 }, 132 133 success: function (label) { 134 label 135 .closest('.form-group').removeClass('has-error'); // set success class to the control group 136 }, 137 138 submitHandler: function (form) { 139 successDataDict.show(); 140 errorDataDict.hide(); 141 // form[0].submit(); // submit the form 142 } 143 144 }); 145 146 } 147 148 // 初始化下拉框中的數據字典分類 149 var initDataDictTypes = function(oldDDTypeName) { 150 151 App.blockUI(); 152 153 var hdnContextPath = $("#hdnContextPath").val(); 154 // var formDataDict = $('#form_data_dict'); 155 156 $.ajax({ 157 url : hdnContextPath + "/dataDict/queryDataDictTypeNames.action", 158 dataType : 'json', 159 type : "POST", 160 cache : false, 161 success : function(data) { 162 163 if (data.status == 200 && data.msg == "OK") { 164 var typeNames = data.data; 165 var options = "<option value=''>==請選擇==</option>"; 166 for (var i = 0 ; i < typeNames.length ; i ++) { 167 options += "<option value='" + typeNames[i].typeName + "'>" + typeNames[i].typeName + "</option>"; 168 } 169 $('#typeNameList').html(options); 170 171 if (oldDDTypeName != '' && oldDDTypeName != null ) { 172 $("#typeNameList").val(oldDDTypeName); 173 // $("#typeName").val(""); 174 } 175 176 App.unblockUI(); 177 } 178 179 }, 180 error : function(data) { 181 console.log(JSON.stringify(data)); 182 App.unblockUI(); 183 } 184 }); 185 186 } 187 188 // 根據數據字典名稱下拉框中的值，來動態顯示table中的內容 189 var initDataDictListInTable = function() { 190 191 $("#typeNameList").change(function(){ 192 refreshByDataDictName(); 193 }) 194 195 } 196 197 // 動態展示數據字典到tablelist中 198 var refreshByDataDictName = function() { 199 App.blockUI(); 200 201 var typeName = $("#typeNameList").val(); 202 if(typeName == "" || typeName == null) { 203 $("#dataDictTbl tbody").html(""); 204 setDDNameAndCode(null); 205 App.unblockUI(); 206 return; 207 } 208 209 $.ajax({ 210 url : $("#hdnContextPath").val() + "/dataDict/queryDataDictByTypeName.action?", 211 dataType : 'json', 212 type : "POST", 213 cache : false, 214 data: {"typeName": typeName}, 215 success : function(data) { 216 217 if (data.status == 200 && data.msg == "OK") { 218 $("#dataDictTbl tbody").html(""); 219 var dataDictList = data.data; 220 221 // 如果dataDictList沒有數據，則重新刷新下拉框 222 if (dataDictList.length > 0) { 223 for (var i = 0 ; i < dataDictList.length ; i ++ ) { 224 renderTableList(i, dataDictList[i].id, dataDictList[i].ddkey, dataDictList[i].ddvalue); 225 } 226 setDDNameAndCode(dataDictList[0]); 227 } else { 228 initDataDictTypes(null); 229 setDDNameAndCode(null); 230 } 231 232 App.unblockUI(); 233 234 // 驗證無錯后，移除錯誤class 235 var formDataDict = $('#form_data_dict'); 236 if (formDataDict.valid()) { 237 goodBoyNoError(formDataDict); 238 } 239 240 } 241 242 }, 243 error : function(data) { 244 console.log(JSON.stringify(data)); 245 App.unblockUI(); 246 } 247 }); 248 } 249 250 251 // 設置typeName和typeCode的值 252 var setDDNameAndCode = function(data) {; 253 if (data != null) { 254 $("#typeName").val(data.typeName); 255 $("#typeCode").val(data.typeCode); 256 257 $("#typeName").attr("disabled","disabled"); 258 $("#typeCode").attr("disabled","disabled"); 259 } else { 260 $("#typeName").val(""); 261 $("#typeCode").val(""); 262 263 $("#typeName").removeAttr("disabled"); 264 $("#typeCode").removeAttr("disabled"); 265 } 266 } 267 268 // 獲得數據字典名稱，以下拉框為主，如果下拉框和文本框都不為空，那么選擇下拉框的值 269 var getDataTypeName = function() { 270 var typeName = $("#typeName").val(); 271 var typeNameList = $("#typeNameList").val(); 272 273 if (typeNameList != '' && typeNameList != null ) { 274 return typeNameList; 275 } 276 277 return typeName; 278 } 279 280 // 數據字典下拉框，以及typeName，typeCode，驗證正確后，移除錯誤的class 281 var goodBoyNoError = function(formDataDict) { 282 // 驗證成功則顯示正確信息 283 var errorDataDict = $('.alert-danger', formDataDict); 284 var successDataDict = $('.alert-success', formDataDict); 285 // 移除錯誤的class 286 successDataDict.show(); 287 errorDataDict.hide(); 288 $("#typeName").closest('.form-group').removeClass('has-error'); 289 $("#typeCode").closest('.form-group').removeClass('has-error'); 290 } 291 292 // 展示數據字典內容到table中 293 var renderTableList = function(rowNumber, dataDictId, key, value) { 294 var keyIdOrName = "data_dict_key_" + rowNumber; 295 var valueIdOrName = "data_dict_value_" + rowNumber; 296 var submitId = "data_dict_submit_" + rowNumber; 297 var deleteId = "data_dict_delete_" + rowNumber; 298 var hdnDataDictIdOrName = "dataDictId_" + rowNumber; 299 var formRowIdOrName = "dataDictForm" + rowNumber; 300 var tb_rowIdOrName = "tb_row_data_dict_" + rowNumber; 301 302 303 var row = "<tr id='" + tb_rowIdOrName + "'>" + 304 "<form id='" + formRowIdOrName + "' action=''>" + 305 "<input type='hidden' id='" + hdnDataDictIdOrName + "' name='" + hdnDataDictIdOrName + "' value='" + dataDictId + "'/>" + 306 307 "<td> <input type='text' id='" + keyIdOrName + "' name='" + keyIdOrName + "' class='form-control input-small' value='" + key + "'> </td>" + 308 "<td> <input type='text' id='" + valueIdOrName + "' name='" + valueIdOrName + "' class='form-control input-small' value='" + value + "'> </td>" + 309 "<td>" + 310 "<button type='button' id='" + submitId + "' class='btn blue btn-sm' > 提 交 </button>" + 311 " " + 312 "<button type='button' id='" + deleteId + "' class='btn red btn-sm'> 刪 除 </button>" + 313 " " + 314 "</td>" + 315 316 "</form>" + 317 "</tr>"; 318 // '" + keyIdOrName + "','" + valueIdOrName + "','" + tb_rowIdOrName + "','" + hdnDataDictIdOrName + "' 319 $("#dataDictTbl tbody").append(row); 320 321 // 動態綁定事件， 提交每行數據前先提交數據字典類型名稱form，即：驗證 322 // $("#dataDictTbl").on("click", "#" + submitId, function(){ 323 $("#" + submitId).bind('click',function(){ 324 325 var formDataDict = $('#form_data_dict'); 326 327 // 如果form驗證通過，則提交單行 328 if (formDataDict.valid()) { 329 // 驗證無錯后，移除錯誤class 330 goodBoyNoError(formDataDict); 331 332 var rowKey = $("#" + keyIdOrName).val(); 333 var rowValue = $("#" + valueIdOrName).val(); 334 335 // 判斷單行form中數據是否存在，存在提示錯誤 336 if (rowKey != null && rowKey != "" && rowValue != null && rowValue != "") { 337 if (rowKey.length > 10 || rowKey.length < 1) { 338 SweetAlert.error("數據字典Key長度應在1到10之間."); 339 $("#" + tb_rowIdOrName).attr("bgcolor", "#fbe1e3"); 340 return; 341 } 342 343 if (rowValue.length > 10 || rowValue.length < 1) { 344 SweetAlert.error("數據字典Value長度應在1到10之間."); 345 $("#" + tb_rowIdOrName).attr("bgcolor", "#fbe1e3"); 346 return; 347 } 348 349 $("#" + tb_rowIdOrName).attr("bgcolor", ""); 350 351 var dataTypeName = getDataTypeName(); 352 var dataDictTypeCode = $("#typeCode").val(); 353 var dataDictId = $("#" + hdnDataDictIdOrName).val(); 354 355 App.blockUI(); 356 // 驗證單行數據是否存在 357 $.ajax({ 358 url: $("#hdnContextPath").val() + "/dataDict/saveOrUpdateDataDict.action", 359 type: "POST", 360 async: false, 361 data: { 362 "dataDictId": dataDictId, 363 "dataDictTypeName": dataTypeName, 364 "dataDictTypeCode": dataDictTypeCode, 365 "dataDictKey": rowKey, 366 "dataDictValue": rowValue 367 }, 368 success: function(data) { 369 if(data.status == 200 && data.msg == "OK") { 370 // 驗證成功，提交 371 SweetAlert.success("保存成功"); 372 373 // 復制給隱藏框，這樣再次提交就是修改 374 $("#" + hdnDataDictIdOrName).val(data.data.id); 375 376 // 提交新增數據字典類型后，則要刷新下拉框中的數據，並且默認選中 377 initDataDictTypes(dataTypeName); 378 379 // 是否disable文本框 380 setDDNameAndCode(data.data); 381 382 $("#" + tb_rowIdOrName).attr("bgcolor", ""); 383 App.unblockUI(); 384 } else { 385 SweetAlert.error(data.data); 386 $("#" + tb_rowIdOrName).attr("bgcolor", "#fbe1e3"); 387 console.log(JSON.stringify(data)); 388 App.unblockUI(); 389 } 390 } 391 }); 392 } else { 393 SweetAlert.error("數據字典Key或者Value不能為空."); 394 $("#" + tb_rowIdOrName).attr("bgcolor", "#fbe1e3"); 395 } 396 397 } 398 }); 399 400 // 動態綁定刪除事件 401 $("#" + deleteId).bind('click',function(){ 402 var dataDictId = $("#" + hdnDataDictIdOrName).val(); 403 App.blockUI(); 404 $.ajax({ 405 url: $("#hdnContextPath").val() + "/dataDict/deleteDataDict.action?dataDictId=" + dataDictId, 406 type: "POST", 407 async: false, 408 success: function(data) { 409 if(data.status == 200 && data.msg == "OK") { 410 // 驗證成功，提交 411 SweetAlert.success("刪除成功"); 412 413 // 刷新table 414 refreshByDataDictName(); 415 416 App.unblockUI(); 417 } else { 418 SweetAlert.error("刪除失敗：" + data.data); 419 console.log(JSON.stringify(data)); 420 App.unblockUI(); 421 } 422 } 423 }); 424 425 }); 426 427 } 428 429 430 // 初始化數據字典列表對象 431 var initDataDictTable = function() { 432 433 // 按鈕點擊新增一行 434 $("#addRowDataDict").click(function(){ 435 // table總行數 436 var rowCounts = $("#dataDictTbl tr").length; 437 // 當前行累計+1 438 var rowNumber = rowCounts - 1; 439 renderTableList(rowNumber, "", "", ""); 440 return; 441 }); 442 443 // 按鈕點擊新增一行 444 $("#addRowDataDict2").click(function(){ 445 // table總行數 446 var rowCounts = $("#dataDictTbl tr").length; 447 // 當前行累計+1 448 var rowNumber = rowCounts - 1; 449 renderTableList(rowNumber, "", "", ""); 450 return; 451 452 }); 453 454 // 刷新列表 455 $("#refreshRowDataDict").click(function(){ 456 refreshByDataDictName(); 457 return; 458 }); 459 } 460 461 462 // TODO 動態 jquery tabs展示頁面 463 464 465 return { 466 // 初始化各個函數及對象 467 init: function () { 468 469 formDataDictValidation(); 470 initDataDictTypes(null); 471 initDataDictTable(); 472 initDataDictListInTable(); 473 } 474 475 }; 476 477 }(); 478 479 jQuery(document).ready(function() { 480 DataDict.init(); 481 });
大致就是這樣子了，不是很難，當然也可以用其他形式來維護數據字典，這個就不多說了
