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*/
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='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() + 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] + '"> ' + 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}|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 = 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 表单中，否则会出现使用不了的情况
