zoukankan      html  css  js  c++  java
  • select帮助类,批量绑定slect

    这边只写了前端的绑定,后端绑定放在C#部分。

    select绑定html

    <select name="OrderStatusID" id="OrderStatusID" selectjson='{"ServiceName":"Order","HandlerMethod":"GetOrderTableMappingList","parameterDataJsonString":"{"modelParam":{"MappingType":"2"}}"}'
        bindjson='{"value":"ID","html":"TableMappingName","isAll":true,"parentValue":"PlatformID","isParentContain":true,"allHtml":"请选择"}'>
    </select>

    调用select帮助类js

    //获取需要绑定对象集合
    configData = {
      url: "",
       formID:""
    };
    //在封闭的空间,传到全局变量
    window.dataSourceList
    = CommonFormHelper.GetSelectDataSource(configData); //绑定select对象 CommonFormHelper.SetSelectHtmlByDataSourceList(dataSourceList);

    select绑定js:CommonFormHelper

    var CommonFormHelper = {
        Settings: {
        },
        Init: function (settings) {
            CommonFormHelper.Settings = $.extend({}, CommonFormHelper.Settings, settings);
            if (CommonFormHelper.Settings) {
                if (CommonFormHelper.Settings.isNeedLoadSelect) {
                    var data = CommonFormHelper.GetSelectDataSource(CommonFormHelper.Settings);
                };
            };
        },
        Load: function () { },
        GetSelectDataSource: function (settings) {
            //获取select绑定对象的数据列表,格式[{name:"",dataSource:[],bindSource:{html:"",value:""}}]
            settings.async = false;
            settings.data = { dataSourceSettingsList: CommonFormHelper.GetFormSelectJsonDataByName(settings.formID) };
            var selectJsonData = CommonFormHelper.GetFormSelectFullJsonDataByName(settings.formID);
            var entityList = [];
            settings.success = function (data) {
                if (data.Success && data.ResJson) {
                    entityList = JSON.parse(data.ResJson);
                    if (entityList != null && selectJsonData.length > 0) {
                        for (var i = 0, len = entityList.length; i < len; i++) {
                            selectJsonData[i]["dataSource"] = entityList[i];
                        };
                    };
                };
            };
            //通过ajax同步方法获取对应select参数的数据对象集合
            AjaxHelper.CommonAjax(settings);
            return selectJsonData;
        },
        GetFormSelectJsonDataByName: function (formID) {
            //获取select绑定参数对象列表,格式[{ServiceName:"",HandleName:"",parameterDataJsonString:{}}}]
            var data = [];
            var formJQ = $("#" + formID);
            if (formJQ.length > 0) {
                formJQ.find("select").each(function () {
                    var thisJQ = $(this);
                    if (thisJQ.attr("selectjson")) {
                        data.push(JSON.parse(thisJQ.attr("selectjson")));
                    }
                });
            };
            return data;
        },
        GetFormSelectFullJsonDataByName: function (formID) {
            //获取select绑定对象列表,格式[{name:"",selectSource:{},bindSource:{}]
            var data = [];
            var formJQ = $("#" + formID);
            if (formJQ.length > 0) {
                formJQ.find("select").each(function () {
                    var thisJQ = $(this);
                    if (thisJQ.attr("selectjson")) {
                        data.push({
                            name: thisJQ.attr("name"),
                            selectSource: JSON.parse(thisJQ.attr("selectjson")),
                            bindSource: thisJQ.attr("bindjson") != undefined ? JSON.parse(thisJQ.attr("bindjson")) : null
                        });
                    };
                });
            };
            return data;
        },
        SetSelectHtmlByDataSourceList: function (dataSourceList) {
            //dataSourceList格式[{name:"",dataSource:[],bindSource:{html:"",value:""}}]
            if (dataSourceList == null || dataSourceList.length == 0) return;
            for (var i = 0, len = dataSourceList.length; i < len; i++) {
                CommonFormHelper.SetSelectHtmlByDataSource(dataSourceList[i]);
            };
        },
        SetSelectHtmlByDataSource: function (dataSource) {
            //dataSource格式{name:"",dataSource:[],bindSource:{html:"",value:""}}
            if (dataSource == null || !dataSource.name || dataSource.dataSource == null) return;
            var selectJQ = $("[name='" + dataSource.name + "']");
            if (dataSource.bindSource == undefined) {
                dataSource.bindSource = { html: "value", value: "code" };
            };
            var html = "";
            var bindSource = { isAll: false, allValue: "-1", allHtml: "全部" };
            dataSource.bindSource = $.extend({}, bindSource, dataSource.bindSource);
            if (dataSource.bindSource.isAll) {
                html += "<option value=" + dataSource.bindSource.allValue + ">" + dataSource.bindSource.allHtml + "</option>";
            }
            for (var i = 0, len = dataSource.dataSource.length; i < len; i++) {
                html += "<option value=" + dataSource.dataSource[i][dataSource.bindSource.value] + ">" + dataSource.dataSource[i][dataSource.bindSource.html] + "</option>";
            };
            selectJQ.empty().html(html);
            selectJQ.data("datasource", dataSource);
        },
        SetFormValueByName: function (formID, dataSource) {
            $("#" + formID).children().each(function () {
                var thisJQ = $(this);
                if (!thisJQ.is("button")) {
                    var thisJQ = $(this);
                    var name = thisJQ.attr("name");
                    if (isEmpty(name) && isEmpty(dataSource[name])) {
                        if (thisJQ.attr("jsontype")) {
                            var value = dataSource[name];
                            switch (thisJQ.attr("jsontype")) {
                                case "Date":
                                    value = CommonHelper.GetDateTimeByFormat(CommonHelper.DateTimeFormat.Date);
                                    break;
                                case "DateTime":
                                    value = CommonHelper.GetDateTimeByFormat(CommonHelper.DateTimeFormat.DateTime);
                                    break;
                                case "bool":
                                    value = dataSource[name] == 1 ? "是" : "否";
                                    break;
                                case "isEnable":
                                    value = dataSource[name] == 1 ? "启用" : "停用";
                                    break;
                            };
                        };
                        thisJQ.val(value);
                    }
                };
            });
        }
    };
  • 相关阅读:
    ES6
    ES6
    ES6
    ES6
    ES6
    ES6
    ES6
    IOS 最新开发上架流程 以及发布打包注意事项
    JavaScript Arguments
    函数防抖和函数节流
  • 原文地址:https://www.cnblogs.com/gzbnet/p/8074984.html
Copyright © 2011-2022 走看看