zoukankan      html  css  js  c++  java
  • MiniUi绑定mini-combobox下拉框

    一:最先开始后台使用json字符串绑定combobox

    [{"id":1,"value":"是","text":"是"},{"id":0,"value":"否","text":"否"}]

    然后我忘记json字符串的格式了,id属性没有加"" ,combobox一直绑定不上数据,而且请注意text属性是combobox的显示值,value属性不是显示值

    二:combobox的前端界面是

    <input id="InUse" class="mini-combobox" url="@Url.Action("GetInUse")" style="150px;" textfield="text"   shownullitem="true" allowinput="true" />

    而action里返回JsonResult或者string格式都可以

    public JsonResult GetInUse()
            {
                List<JsonData> list = new List<JsonData>();
                list.Add(new JsonData() { id = 1, text = "" });
                list.Add(new JsonData() { id = 0, text = "" });
    
                return Json(list, JsonRequestBehavior.AllowGet);//这里使用的是get请求
            }
    
            public string GetInUse()
            {
                List<JsonData> list = new List<JsonData>();
                list.Add(new JsonData() { id = 1, text = "" });
                list.Add(new JsonData() { id = 0, text = "" });
    
                JavaScriptSerializer jsonSerializer = new JavaScriptSerializer();
                return  jsonSerializer.Serialize(list);
            }

    三:除了使用MVC提供的 url="@Url.Action("GetInUse")" 的方式,还可以在页面加载的时候使用JavaScript为下拉框赋值

    <script type="text/javascript">
    
        //方法一
        var InUse = mini.get("InUse");
        $.ajax({
            url: '@Url.Action("GetInUse")',
            type: 'get',
            contentType: "application/json",
            success: function (jsonData) {
                if (jsonData) {
                    InUse.load(jsonData);
                }
            }
        });
        //方法二
        $(document).ready(function () {
            var jsonData = [{ 'id': '1', 'text': '' }, { 'id': '0', 'text': '' }];
            mini.get("InUse").load(jsonData);
        })
    </script>

     四:使用miniui直接在input标签的date属性里设置json数据(过了很多天后补的一种方法,未测试,如果json格式不对,尝试给id,text属性加单引号)

    <input id="InUse" name="InUse" class="mini-combobox" style=" 200px;" textfield="text"
                   valuefield="id" emptytext="请选择..."
                   allowinput="false" shownullitem="true" nullitemtext="请选择..."
                   data="[{id:'1',text:'是'},{id:'0',text:'否'}]" />

     五:action里读取枚举数据

    public JsonResult GetStatusEnum(bool isAll)
            {
                try
                {
                    var list = CommonUtil.GetEnumList<PlanTypeEnum>();
                    var returnList = list.Select(item => new DictionaryEntity
                    {
                        Key = item.Key,
                        Value = item.Value
                    }).ToList();
                    if (isAll)
                    {
                        returnList.Insert(0, new DictionaryEntity { Key = -1, Value = "" });
                    }
                    return Json(returnList, JsonRequestBehavior.AllowGet);
                }
                catch (Exception ex)
                {
                    throw;
                }
            }
    /// <summary>
            /// 把枚举描述和值规则拼接字符串
            /// </summary>
            /// <typeparam name="T">枚举</typeparam>
            /// <returns>枚举值,枚举描述;枚举值,枚举描述;枚举值,枚举描述</returns>
            public static IList<DictionaryEntry> GetEnumList<T>()
            {
                List<DictionaryEntry> list = new List<DictionaryEntry>();
                Dictionary<int, string> dic = GetDictionary(typeof(T));
                DictionaryEntry entity;
                foreach (var key in dic.Keys)
                {
                    entity = new DictionaryEntry();
                    entity.Key = key;
                    entity.Value = dic[key];
                    list.Add(entity);
                }
                return list;
            }
    /// <summary>
            /// 获取枚举值、描述列表
            /// </summary>
            /// <param name="enumType">枚举类型</param>                
            /// <returns>
            /// 返回枚举值、描述列表
            /// </returns>
            private static Dictionary<int, string> GetDictionary(Type enumType)
            {
                Dictionary<int, string> dic = new Dictionary<int, string>();
                foreach (int enumValue in Enum.GetValues(enumType))
                {
                    dic.Add(enumValue, string.Empty);
                    FieldInfo fieldinfo = enumType.GetField(Enum.GetName(enumType, enumValue));
                    if (fieldinfo == null)
                    {
                        return null;
                    }
                    Object[] objs = fieldinfo.GetCustomAttributes(typeof(DescriptionAttribute), false);
                    if (objs.Length != 0)
                    {
                        DescriptionAttribute da = (DescriptionAttribute)objs[0];
                        dic[enumValue] = da.Description;
                    }
                }
                return dic;
            }

    前台界面

    //获取Combobox控件值,统一调用
    function GetCombobox(ctrlId, url, isAll, isAsync, isSelect, callback) {
        /// <signature>
        ///<summary>加载下拉框控件</summary>
        ///<param name="ctrlId" type="String">要绑定数据的控件ID</param>
        ///<param name="url" type="String">数据请求地址ID</param>
        ///<param name="isAll" type="String">是否包含全部标识</param>
        ///<param name="isAsync" type="String">是否异步</param>
        ///<param name="isSelect" type="String">是否选中</param>
        ///<param name="callback" type="function">回调函数</param>
        /// </signature>
        if (isAsync == undefined)
            isAsync = false;
        if (isAll == undefined)
            isAll = false;
        var cbox = mini.get(ctrlId);
        $.ajax({
            url: url,
            type: "post",
            async: isAsync,
            data: { isAll: isAll },
            success: function (text) {
                if (cbox != undefined) {
                    cbox.setData(text);
                    if (isSelect === undefined || isSelect === true) {
                        cbox.select(0);
                    }
                    //cbox.doValueChanged();
                } else {
                    alert('获取下拉框对象为空');
                }
                if (callback) callback();
            },
            error: function (text) {
                var jsontext = mini.decode(text.responseText);
                alert(jsontext.Message);
                return;
            }
        });
    }
    $(function () {
                //计划类型
                GetCombobox('PlanTypeId', '@Url.Action("GetPlanTypeEnum")', false);
            })
    计划类型:
    <input id="PlanTypeId" name="PlanTypeId" class="mini-combobox comboboxWidth" style=" 130px" valuefield="Key" textfield="Value" onblur="checkComboboxblur('PlanTypeId')" allowinput="true" valuefromselect="true" required="true" />
  • 相关阅读:
    DB2常用命令2
    主流数据库命令的区别
    数据库开发
    DB2常用函数
    java Http post请求发送json字符串
    Spring Boot集成MyBatis与分页插件
    js实现加密(?!)
    本周、本月等日期的获取
    POST请求中参数以form data和request payload形式+清空数组方式
    转:目前为止最全的微信小程序项目实例
  • 原文地址:https://www.cnblogs.com/xiaoyueryeah/p/7162013.html
Copyright © 2011-2022 走看看