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() + ,
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("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');