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] + '">&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整合篇的更多相关文章

  1. Spring+SpringMVC+MyBatis+easyUI整合基础篇(六)maven整合SSM

    写在前面的话   承接前文<Spring+SpringMVC+MyBatis+easyUI整合基础篇(五)讲一下maven>,本篇所讲述的是如何使用maven与原ssm项目整合,使得一个普 ...

  2. Spring+SpringMVC+MyBatis+easyUI整合基础篇(八)mysql中文查询bug修复

    写在前面的话 在测试搜索时出现的问题,mysql通过中文查询条件搜索不出数据,但是英文和数字可以搜索到记录,中文无返回记录.本文就是写一下发现问题的过程及解决方法.此bug在第一个项目中点这里还存在, ...

  3. Spring+SpringMVC+MyBatis+easyUI整合基础篇(十一)SVN服务器进阶

    日常啰嗦 上一篇文章<Spring+SpringMVC+MyBatis+easyUI整合基础篇(十)SVN搭建>简单的讲了一下SVN服务器的搭建,并没有详细的介绍配置文件及一些复杂的功能, ...

  4. Spring+SpringMVC+MyBatis+easyUI整合基础篇(十二)阶段总结

    不知不觉,已经到了基础篇的收尾阶段了,看着前面的十几篇文章,真的有点不敢相信,自己竟然真的坚持了下来,虽然过程中也有过懒散和焦虑,不过结果还是自己所希望的,克服了很多的问题,将自己的作品展现出来,也发 ...

  5. Spring+SpringMVC+MyBatis+easyUI整合优化篇(二)Log4j讲解与整合

    日常啰嗦 上一篇文章主要讲述了一下syso和Log间的一些区别与比较,重点是在项目的日志功能上,因此,承接前文<Spring+SpringMVC+MyBatis+easyUI整合优化篇(一)Sy ...

  6. Spring+SpringMVC+MyBatis+easyUI整合优化篇(四)单元测试实例

    日常啰嗦 前一篇文章<Spring+SpringMVC+MyBatis+easyUI整合优化篇(三)代码测试>讲了不为和不能两个状态,针对不为,只能自己调整心态了,而对于不能,本文会结合一 ...

  7. Spring+SpringMVC+MyBatis+easyUI整合优化篇(五)结合MockMvc进行服务端的单元测试

    日常啰嗦 承接前一篇文章<Spring+SpringMVC+MyBatis+easyUI整合优化篇(四)单元测试实例>,已经讲解了dao层和service层的单元测试,还有控制器这层也不能 ...

  8. Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合

    日常啰嗦 本来这一篇和接下来的几篇是打算讲一下JDBC和数据库优化的,但是最近很多朋友加我好友也讨论了一些问题,我发现大家似乎都是拿这个项目作为练手项目,作为脚手架来用的,因此呢,改变了一下思路,JD ...

  9. Spring+SpringMVC+MyBatis+easyUI整合优化篇(七)图片上传功能

    日常啰嗦 前一篇文章<Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合>讲了富文本编辑器UEditor的整合与使用 ...

随机推荐

  1. 订制rpm包到Centos7镜像中

    本文以CentOS 7.4 最小化镜像(CentOS-7-x86_64-Minimal-1708.iso)为模版 要达到的目的: 1.订制所需的rpm软件包集成到iso文件中 2.制作完成的ISO全自 ...

  2. Synchronized的基本知识、实现原理以及其与ReentrantLock的区别

    一.synchronized知识 在谈论synchronized之前,我们需要了解线程安全问题的主要诱因.线程安全问题的主要诱因如下: 存在共享数据(也称为临界资源) 存在多条线程共同操作这些共享数据 ...

  3. 如何通过Git将写好的项目发布到github上

    1.在GitHub上创建新的项目文件 2.创建之后会进入新的页面,看到如下图的内容,将地址记下来 3.打开Git 4.进入项目本地所在目录 5.输入:git init 这个意思是在当前项目的目录中生成 ...

  4. js实现搜索记录列表

    <div class="sy_div28"> <div class="sy_div23"> <span>搜索历史</s ...

  5. 前端架构师 摘自《前端架构设计》-micah godbolt

    作为前端架构师,你经常需要制定,或至少能够掌握以上所列的每一项内容.流程中的任何一个环节出现问题,都会迅速演变为开发人员的痛苦,或者导致网站无法持续满足用户要求,甚至崩溃.  前端架构师的用户是开发人 ...

  6. 了解基本的bash shell命令

    本节内容主要介绍如何使用bash shell提供的基本命令处理Linux文件和目录: 1.启动shell shell是一个可以交互访问的Linux系统程序,它的运行与普通程序相同,系统启动的shell ...

  7. Git基本原理-hash算法

    一.哈希   哈希是一个系列的加密算法,各个不同的哈希算法虽然加密强度不同,但是有以下几个共同点:  ①不管输入数据的数据量有多大,使用同一个哈希算法,得到的加密结果长度固定  ②哈希算法确定,输入数 ...

  8. VS2019 更新MSDN并创建快捷方式

    本文主要记录了 VS2019 中帮助查看器(Help Viewer)相关的内容,如何安装.如何启动.如何复用已有的文档.如何创建快捷方式等内容,通过本文将会对该工具有一个全面的了解. 安装 Help ...

  9. Map the Debris 轨道周期

    返回一个数组,其内容是把原数组中对应元素的平均海拔转换成其对应的轨道周期. 原数组中会包含格式化的对象内容,像这样 {name: 'name', avgAlt: avgAlt}. 至于轨道周期怎么求, ...

  10. java前端js和框架内容知识和面试

    关于数据库知识和面试 关于JAVA知识和面试 一.多个ajax请求执行顺序问题 若点击一个操作内,发送两个ajax请求,其中一个请求会不会等待另一个请求执行完毕之后再执行? 不会,这两个异步请求会同时 ...