EasyUI整合篇

最新推荐文章于 2019-11-04 18:40:33 发布

weixin_30773135

最新推荐文章于 2019-11-04 18:40:33 发布

阅读量120

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/elves/p/5510601.html

本文介绍了 EasyUI 中 combobox 的使用方法，包括如何解决获取值的问题、实现多选功能及自定义验证规则等。提供了丰富的代码示例帮助开发者更好地理解和运用。

easy ui combobox getValue 获取不到值问题

必须设置属性showblank: true，否则只能从onSelect事件中获取

    $("#ddlType").combobox({
        valueField: 'id',
        textField: 'text',
        editable: false,
        mode: 'local',
        data: defultlist,
        //showblank: true
        onSelect: function (row) {
            $("#ddlType").val(row.id);      
    });

combobox 多选案例

 var JsonData = $("#hdWTData").val();
    var defultlist = [];//
    if (JsonData != "") {
        JsonData = JSON.parse(JsonData);
        for (var i = 0; i < JsonData.length - 1; i++) {
            defultlist.push({ "id": JsonData[i].BZlevelID, "text": JsonData[i].BZlevelName });
        }
    }

    $('#BZlevelID').combobox({
        valueField: 'id',
        textField: 'text',
        editable: false,
        //disabled: blDisabled,
        //required: true,
        showblank: true,
        //validType: 'cmbrequired',
        multiple: true,
        formatter: function (row) {
            var opts = $(this).combobox('options');
            return '<input type="checkbox" class="combobox-checkbox" value="' + row[opts.valueField] + '" title="' + row[opts.textField] + '">&nbsp;&nbsp;' + row[opts.textField]
        },
        mode: 'local',
        data: defultlist,
        onSelect: function (row) {
            var opts = $(this).combobox("options");
            var objCom = null;
            var children = $(this).combobox("panel").children();
            $.each(children, function (index, obj) {
                if (row[opts.valueField] == obj.getAttribute("value")) {
                    objCom = obj;
                }
            });
            if (objCom != null && objCom.children && objCom.children.length > 0) {
                objCom.children[0].checked = true;
            }
        },
        onUnselect: function (row) {
            var opts = $(this).combobox("options");
            var objCom = null;
            var children = $(this).combobox("panel").children();
            $.each(children, function (index, obj) {
                if (row[opts.valueField] == obj.getAttribute("value")) {
                    objCom = obj;
                }

            });
            if (objCom != null && objCom.children && objCom.children.length > 0) {
                objCom.children[0].checked = false;
            }
        }
    });
    if (defultlist.length > 0) {
        $("#BZlevelID").combobox("select", "3");
        $("#BZlevelID").combobox("select", "4");
        $("#BZlevelID").combobox("select", "5");
    }

/*单个*/
//获取值
$('#Id').combobox('getValue');
//设置值
 $('#Id').combobox('setValue','key')

/*多个 multiple: true*/
//获取值
$('#Id').combobox('getValues');
//设置值
$('#Id').combobox('setValues','key1,key2,key3'.split(','))

//自定义验证  
$.extend($.fn.validatebox.defaults.rules, {
    comboxRequired: {//combox必选验证
        validator: function (value, param) {
             return value != '--请选择--';
        },
        message: '该项为必选项.'
    },
    number: {//整数和小数验证
        validator: function (value) {
            var reg = /^\d+(\.\d+)?$/;
            return reg.test(value);
        },
        message: '请输入数字，并确保格式正确'
    },
    maxLength: {
            validator: function (value, param) {
                return value.length <= param[0];
            },
            message: '请输入长度为{0}的文本'
        },
    minLength: {
        validator: function(value, param){
            return value.length >= param[0];
        },
        message: 'Please enter at least {0} characters.'
    }
});

//验证调用-comboxRequired
$("#select_ID").combobox({
        url: '',
        valueField: 'ID',
        textField: 'Name',
        editable: false,
        validType: 'comboxRequired',
        showblank: true,
        onSelect: function (row) {
            $("#select_ID").val(row.id);
        }
    });

<input type="text"  class="easyui-validatebox validatebox-text" validtype="number" />
<input id="txtCertificateNumber" name="txtCertificateNumber" type="text" class="easyui-validatebox" validtype="number" data-options="required:true,validType:'maxLength[40]'" />

//自定义验证  
$.extend($.fn.validatebox.defaults.rules, {
    isValidIP: {
        validator: function (value) {
            var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
            return reg.test(value);
        },
        message: '请输入正确IP格式'
    }
});

//IP验证-调用 
if (isValidIP(ProtocolIP) == false) {
        showTipsMsg("IP格式不正确！", '2500', '3');
        return;
    }