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='width:100%;height:100%' src=" + url + "></iframe>";

        $("#tabs").tabs('add', {

            title: text,

            closable: true,

            content: content

        });

    }

}

</script>

/*更新tab*/

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='width: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,

        width: $("#tabs").parent().width() + ,

        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("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;

    }

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 = ; 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 = ; 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');

巴特西

EasyUI整合篇

最新文章

热门文章