EasyUI所有方案案例整合篇

easyui-tabs动态添加

  <div class="easyui-tabs" fit="true" border="false" id="tabs" style="height: 500px;">
                <div title="首页">
                    <div align="center" style="padding-top: 100px;"><font color="red" size="8">欢迎使用EasyUi在线中文示例文档（Java后台版）</font></div>
                    <div align="center"><font color="red" size="8">请使用IE9,谷歌，火狐，不支持IE低版本</font></div>
                    <div align="center"><font color="red" size="6">版权所有<a href="https://www.cnblogs.com/elves/" target=_blank>hy</a>，侵权必究</font></div>
                </div>
            </div>
<script>
// 新增Tab
function openTab(text, url) {
    if ($("#tabs").tabs('exists', text)) {
        $("#tabs").tabs('select', text);
    } else {
        var content = "<iframe frameborder='0' scrolling='auto' style='100%;height:100%' src=" + url + "></iframe>";
        $("#tabs").tabs('add', {
            title: text,
            closable: true,
            content: content
        });
    }
}
</script>

 /*更新tab*/

1.

var $tabs = $('#tabs');
var currTab = $tabs.tabs('getSelected'); //获得当前tab
var url = $(currTab.panel('options').content).attr('src');//获取当前url
//刷新当前tab
 $tabs.tabs('update', {
        tab: currTab,
        options: {
            //href: url//加载html内容
            content: "<iframe frameborder='0' scrolling='auto' style='100%;height:100%' src=" + url + "></iframe>"//加载iframe
        }
    });

2.currTab.panel('refresh', url);

3.删除tab页 在新增一个tab

4.跳到对应的tab 在刷新

function addTab(title, url) {
            if ($('#tabs').tabs('exists', title)) {
                var currtab = $('#tabs').tabs('getSelected');
                var tab = $("#tabs").tabs("getTab", title);
                if (currtab == tab) {
                    var url=$(currtab.panel('options').content).attr('src');

                    refreshTab(tab, url);
                }
                else {
                    var tab = $("#tabs").tabs("select", title);
                    var currtab = $('#tabs').tabs('getSelected');
                    var url = $(currtab.panel('options').content).attr('src');
                    refreshTab(tab, url);
                }
            }
            else {
                var content = createFrame(url);
                $('#tabs').tabs('add',
                    {
                        title: title,
                        content: content,
                        closable: true
                    });
            }
        }

//跟新tab 对应的iframe
function refreshTab(obj,url)
 {
     var refresh_tab = obj;
     if (refresh_tab && refresh_tab.find('iframe').length > 0)
        {
           var _refresh_ifram = refresh_tab.find('iframe')[0];
           _refresh_ifram.contentWindow.location.href = url;
        } 
 }

//tab重置宽高并不刷新和跳转
$('#tabs').tabs('resize', {
        plain: false,
        boder: false,
         $("#tabs").parent().width() + 5,
        height: $("#tabs").parent().height()
    });

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("setValue", "3");
    }

/*单个*/
//获取值
$('#Id').combobox('getValue');
//设置值
 $('#Id').combobox('setValue','key');
//设置值2--会触发onSelect事件
 $('#Id').combobox('select','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}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5])$/
            return reg.test(value);
        },
        message: '请输入正确IP格式'
    }
});

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

tree

//tree checkbox全选反选  
function treeCheckedAll(bl, treeMenu) {
    $treeMenu = $('#' + treeMenu);
    if (bl) {
        var nodes = $treeMenu.tree('getChecked', 'unchecked');
        for (var i = 0; i < nodes.length; i++) {
            var node = $treeMenu.tree('find', nodes[i].id);//查找节点  
            $treeMenu.tree('check', node.target);//将得到的节点选中  
        }
    } else {
        var nodes = $treeMenu.tree('getChecked');
        for (var i = 0; i < nodes.length; i++) {
            var node = $treeMenu.tree('find', nodes[i].id);
            $treeMenu.tree('uncheck', node.target);
        }
    }
}

//checkbox控制单选
$('#tree').tree({
    url:'xxx',
    checkbox: true,//出现checkbox
    onlyLeafCheck: true,//只允许选择子节点
    onCheck: treeSingleCheckCtrl//核心,单选控制
});
 
//单选控制
function treeSingleCheckCtrl(node, checked) {
    var elementId = 'tree';//元素ID
    if (checked) {
        var allCheckedNodes = $('#' + elementId).tree("getChecked");
        for (var i = 0; i < allCheckedNodes.length; i++) {
            var tempNode = allCheckedNodes[i];
            if (tempNode.id != node.id) {
                $('#' + elementId).tree('uncheck', tempNode.target);
            }
        }
    }
}

//同级-单选控制
function treeSameSingleCheckCtrl(node, checked) {
    var elementId = 'tree';//元素ID
    if (checked) {
        $tree = $('#' + elementId);
        var pNode = $tree.tree('getParent', node.target);
        var tNodes = $tree.tree('getChildren', pNode.target);

        for (var i = 0; i < tNodes.length; i++) {
            if (tNodes[i].id != node.id) {
                $tree.tree('uncheck', tNodes[i].target);
            }
        }
    }
}

 只允许选择子节点 onlyLeafCheck: true

onBeforeSelect: function (node) {
                    //返回树对象
                    var tree = $(this).tree;
                    //选中的节点是否为叶子节点,如果不是叶子节点,清除选中
                    var isLeaf = tree('isLeaf', node.target);
                    if (!isLeaf) {
                        return false;
                    }
                }

//或onBeforeSelect、onSelect触发

//返回树对象
    var tree = $(this).tree;
    //选中的节点是否为叶子节点,如果不是叶子节点,清除选中
    var isLeaf = tree('isLeaf', node.target);
    if (!isLeaf) {
        //清除选中
        //$('#tree').treegrid("unselect", node.target);
        $('#tree').treegrid("unselect");
        return false;
    }

//easyUI中layout布局隐藏动态实现

    /**  
     * layout方法扩展  
     * @param {Object} jq  
     * @param {Object} region  
     */  
    $.extend($.fn.layout.methods, {   
        /**  
         * 面板是否存在和可见  
         * @param {Object} jq  
         * @param {Object} params  
         */  
        isVisible: function(jq, params) {   
            var panels = $.data(jq[0], 'layout').panels;   
            var pp = panels[params];   
            if(!pp) {   
                return false;   
            }   
            if(pp.length) {   
                return pp.panel('panel').is(':visible');   
            } else {   
                return false;   
            }   
        },   
        /**  
         * 隐藏除某个region，center除外。  
         * @param {Object} jq  
         * @param {Object} params  
         */  
        hidden: function(jq, params) {   
            return jq.each(function() {   
                var opts = $.data(this, 'layout').options;   
                var panels = $.data(this, 'layout').panels;   
                if(!opts.regionState){   
                    opts.regionState = {};   
                }   
                var region = params;   
                function hide(dom,region,doResize){   
                    var first = region.substring(0,1);   
                    var others = region.substring(1);   
                    var expand = 'expand' + first.toUpperCase() + others;   
                    if(panels[expand]) {   
                        if($(dom).layout('isVisible', expand)) {   
                            opts.regionState[region] = 1;   
                            panels[expand].panel('close');   
                        } else if($(dom).layout('isVisible', region)) {   
                            opts.regionState[region] = 0;   
                            panels[region].panel('close');   
                        }   
                    } else {   
                        panels[region].panel('close');   
                    }   
                    if(doResize){   
                        $(dom).layout('resize');   
                    }   
                };   
                if(region.toLowerCase() == 'all'){   
                    hide(this,'east',false);   
                    hide(this,'north',false);   
                    hide(this,'west',false);   
                    hide(this,'south',true);   
                }else{   
                    hide(this,region,true);   
                }   
            });   
        },   
        /**  
         * 显示某个region，center除外。  
         * @param {Object} jq  
         * @param {Object} params  
         */  
        show: function(jq, params) {   
            return jq.each(function() {   
                var opts = $.data(this, 'layout').options;   
                var panels = $.data(this, 'layout').panels;   
                var region = params;   
      
                function show(dom,region,doResize){   
                    var first = region.substring(0,1);   
                    var others = region.substring(1);   
                    var expand = 'expand' + first.toUpperCase() + others;   
                    if(panels[expand]) {   
                        if(!$(dom).layout('isVisible', expand)) {   
                            if(!$(dom).layout('isVisible', region)) {   
                                if(opts.regionState[region] == 1) {   
                                    panels[expand].panel('open');   
                                } else {   
                                    panels[region].panel('open');   
                                }   
                            }   
                        }   
                    } else {   
                        panels[region].panel('open');   
                    }   
                    if(doResize){   
                        $(dom).layout('resize');   
                    }   
                };   
                if(region.toLowerCase() == 'all'){   
                    show(this,'east',false);   
                    show(this,'north',false);   
                    show(this,'west',false);   
                    show(this,'south',true);   
                }else{   
                    show(this,region,true);   
                }   
            });   
        }   
    });  

$('#id').layout('hidden','north');   
$('#id').layout('show','north');  

提示框封装扩展方法

$.fn.extend({
    toolTip: function (func) {
        this.tooltip({
            position: 'right',
            content: func,
            onShow: function () {
                $(this).tooltip('tip').css({
                    backgroundColor: '#666',
                    borderColor: '#666'
                });
            }
        });
    }
});

//$("#sp").show().toolTip('<span style="color:#fff">收起</span>');
//$("#sp").show().toolTip(function(){return '<span style="color:#fff">收起</span>'});

RadioButton等使用时需要加入到Form 表单中，否则会出现使用不了的情况