前端js 實現Html標籤統一賦值和取值 等通用方法

通常我們獲取Html頁面中某個標籤的值,需要通過Id標籤一個一個去獲取,當頁面需要獲取的值很多時,這樣的工作無疑是枯燥且麻煩的,這時候就需要我們寫一些用於偷懶的小方法了。總結方法如下:

var util = {
       init: null
};
util.init = function (){

};

/**
 * 自定義js文件   用於賦值
 * 把數據綁定到對象名稱爲modelName的控件上
 * args:
 *      modelName: 對象名稱
 *      dataObj: 數據對象
 * example: 
 *      <input type="text" name="advModel.name" />
 *      <input type="text" name="advModel.age" />
 *      bindData("advModel", {"name" : "zhangsan", "age" : 34});
**/
util.bindData = function (modelName, dataObj) {
debugger;
    var tagArray = $("[name^=" + modelName + "]");
    var len = tagArray.length;
    for (var i = 0; i < len; i++) {
        var tagObj = tagArray[i];
        var name = $(tagObj).attr("name");
        var tagName = tagObj.tagName;
        var type = tagObj.type;

        if (name == undefined) {
            continue;
        }

        var dataKey = name.substring(name.indexOf(".") + 1);
        var dataValue = dataObj[dataKey];
        if (dataValue == null || dataValue == undefined) {
            continue;
        }

        tagName = tagName.toUpperCase();
        if (tagName == "INPUT") {
            type = type.toUpperCase();
            if (type == "TEXT" || type == "HIDDEN") {
                var comboObj = $("#" + dataKey);
                //var comboObj = $("[name='" + name + "']");
                if (comboObj != null && comboObj != undefined && comboObj.length == 1) {
                    var clazz = comboObj.attr("class");
                    if (util.assert.isEmpty(clazz) && (type == "TEXT"||type == "HIDDEN")) {
                        comboObj.val(dataValue);
                    } else if (clazz.indexOf("datebox-f") !== -1) {
                        comboObj.datebox("setValue", dataValue);
                    } else if (clazz.indexOf("numberbox-f") !== -1) {
                        comboObj.numberbox("setValue", dataValue);
                        continue;
                    } else if (clazz == "combobox-f combo-f" || clazz == "combo-value") {
                        //$("[name='" + name + "']").combobox("setValue", dataValue);
                        //$("[comboname='" + name + "']").combobox("setValue", dataValue);
                        comboObj.combobox("setValue", dataValue);
                    }
                }
                tagObj.value = dataValue;
            }
            if (type == "RADIO") {
                if (tagObj.value == dataValue) {
                    tagObj.checked = true;
                }
            }
            if (type == "CHECKBOX") {
                for (var m = 0; m < dataValue.length; m++) {
                    var chkValue = dataValue[m];
                    if (tagObj.value == chkValue) {
                        tagObj.checked = true;
                    }
                }
            }
        } else if (tagName == "SELECT") {

        } else if (tagName == "TEXTAREA") {
            tagObj.value = dataValue;
        } else if (tagName == "SPAN" || tagName == "DIV" || tagName == 'TD') {
            tagObj.innerHTML = dataValue;
        }
    }
};



/**
 * 根據model名把表單中的數據轉換爲對象
 * args:
 *    modelName 對象的名稱
 * example:
 *      <input type="text" name="userModel.name" />
 *      <input type="text" name="userModel.age" />
 *      var userModel =transferModel("userModel");
**/
util.transferModel = function (modelName) {
    var tagArray = $("[name^=" + modelName + "]");
    var len = tagArray.length;
    var dataObj = {};
    for (var i = 0; i < len; i++) {
        var tagObj = tagArray[i];
        var name = $(tagObj).attr("name");
        var tagName = tagObj.tagName;
        var type = tagObj.type;

        if (name == undefined) {
            continue;
        }

        var dataKey = name.substring(name.indexOf(".") + 1);
        tagName = tagName.toUpperCase();
        if (tagName == "TEXTAREA") {
            dataObj[dataKey] = tagObj.value;
        } else if (tagName == "DIV") {
            dataObj[dataKey] = $("#" + dataKey).html();
        }
        if (tagName == "INPUT") {
            type = type.toUpperCase();
            if (type == "TEXT" || type == "HIDDEN") {
                dataObj[dataKey] = tagObj.value;
            }
            if (type == "RADIO") {
                if (tagObj.checked) {
                    dataObj[dataKey] = tagObj.value;
                }
            }
            if (type == "CHECKBOX") {
                if (tagObj.checked) {
                    if (dataObj[dataKey] != undefined && dataObj[dataKey] != null) {
                        var chkArray = dataObj[dataKey];
                        chkArray.push(tagObj.value);
                        dataObj[dataKey] = chkValArray;
                    } else {
                        var chkValArray = [];
                        chkValArray.push(tagObj.value);
                        dataObj[dataKey] = chkValArray;
                    }
                }
            }
        }
    }
    return dataObj;
};





//util.assert.isEmpty()
//util.assert.isNotEmpty()
util.assert = {
  isBoolean: function (G) {
      return (typeof G === "boolean");
  },
  //判斷字符串是否由數字組成,則使用RegexHelper的digitMatch
  //或使用isFinite
  isNumber: function (G) {
      return (typeof G === "number" && isFinite(G));
  },
  isString: function (G) {
      return (typeof G === "string" || G.constructor == String);
  },
  isFunction: function (G) {
      var A = {};
      return (A.toString.apply(G) === A.toString.apply(Function));
  },
  isArray: function (G) {
      return Object.prototype.toString.call(G) === "[object Array]";
  },
  isObject: function (G) {
      return (G && (typeof G === "object" || this.isFunction(G)) || false);
  },
  isDefined: function (v) {
      return typeof v !== 'undefined';
  },
  isNotDefined: function (v) {
      return (!util.assert.isDefined(v));
  },
  /*無法判斷對象或數組爲空,可以用來判斷變量是否爲空*/
  isEmpty: function (v, allowBlank) {
      return v === null || v === undefined || ((util.assert.isArray(v) && !v.length)) || (!allowBlank ? v === '' : false);
  },
  isNotEmpty: function (v, allowBlank) {
      return !util.assert.isEmpty(v, allowBlank);
  }
};


$(document).ready(function () {
    util.init();
});
... prompt'''
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章