easyui-tabs动态添加

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

/*更新tab*/

1.

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

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

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

4.跳到对应的tab 在刷新

  1. function addTab(title, url) {
  2. if ($('#tabs').tabs('exists', title)) {
  3. var currtab = $('#tabs').tabs('getSelected');
  4. var tab = $("#tabs").tabs("getTab", title);
  5. if (currtab == tab) {
  6. var url=$(currtab.panel('options').content).attr('src');
  7.  
  8. refreshTab(tab, url);
  9. }
  10. else {
  11. var tab = $("#tabs").tabs("select", title);
  12. var currtab = $('#tabs').tabs('getSelected');
  13. var url = $(currtab.panel('options').content).attr('src');
  14. refreshTab(tab, url);
  15. }
  16. }
  17. else {
  18. var content = createFrame(url);
  19. $('#tabs').tabs('add',
  20. {
  21. title: title,
  22. content: content,
  23. closable: true
  24. });
  25. }
  26. }
  27.  
  28. //跟新tab 对应的iframe
  29. function refreshTab(obj,url)
  30. {
  31. var refresh_tab = obj;
  32. if (refresh_tab && refresh_tab.find('iframe').length > 0)
  33. {
  34. var _refresh_ifram = refresh_tab.find('iframe')[0];
  35. _refresh_ifram.contentWindow.location.href = url;
  36. }
  37. }
  1. //tab重置宽高并不刷新和跳转
  2. $('#tabs').tabs('resize', {
  3. plain: false,
  4. boder: false,
  5. width: $("#tabs").parent().width() + ,
  6. height: $("#tabs").parent().height()
  7. });

easy ui combobox getValue 获取不到值问题

必须设置属性showblank: true,否则只能从onSelect事件中获取

  1. $("#ddlType").combobox({
  2. valueField: 'id',
  3. textField: 'text',
  4. editable: false,
  5. mode: 'local',
  6. data: defultlist,
  7. //showblank: true
  8. onSelect: function (row) {
  9. $("#ddlType").val(row.id);
  10. });

combobox 多选案例

  1. var JsonData = $("#hdWTData").val();
  2. var defultlist = [];//
  3. if (JsonData != "") {
  4. JsonData = JSON.parse(JsonData);
  5. for (var i = 0; i < JsonData.length - 1; i++) {
  6. defultlist.push({ "id": JsonData[i].BZlevelID, "text": JsonData[i].BZlevelName });
  7. }
  8. }
  9.  
  10. $('#BZlevelID').combobox({
  11. valueField: 'id',
  12. textField: 'text',
  13. editable: false,
  14. //disabled: blDisabled,
  15. //required: true,
  16. showblank: true,
  17. //validType: 'cmbrequired',
  18. multiple: true,
  19. formatter: function (row) {
  20. var opts = $(this).combobox('options');
  21. return '<input type="checkbox" class="combobox-checkbox" value="' + row[opts.valueField] + '" title="' + row[opts.textField] + '">&nbsp;&nbsp;' + row[opts.textField]
  22. },
  23. mode: 'local',
  24. data: defultlist,
  25. onSelect: function (row) {
  26. var opts = $(this).combobox("options");
  27. var objCom = null;
  28. var children = $(this).combobox("panel").children();
  29. $.each(children, function (index, obj) {
  30. if (row[opts.valueField] == obj.getAttribute("value")) {
  31. objCom = obj;
  32. }
  33. });
  34. if (objCom != null && objCom.children && objCom.children.length > 0) {
  35. objCom.children[0].checked = true;
  36. }
  37. },
  38. onUnselect: function (row) {
  39. var opts = $(this).combobox("options");
  40. var objCom = null;
  41. var children = $(this).combobox("panel").children();
  42. $.each(children, function (index, obj) {
  43. if (row[opts.valueField] == obj.getAttribute("value")) {
  44. objCom = obj;
  45. }
  46.  
  47. });
  48. if (objCom != null && objCom.children && objCom.children.length > 0) {
  49. objCom.children[0].checked = false;
  50. }
  51. }
  52. });
  53. if (defultlist.length > 0) {
  54. $("#BZlevelID").combobox("select", "3");
  55. $("#BZlevelID").combobox("select", "4");
  56. $("#BZlevelID").combobox("select", "5");
  57. }
  1. /*单个*/
  2. //获取值
  3. $('#Id').combobox('getValue');
  4. //设置值
  5. $('#Id').combobox('setValue','key')
  6.  
  7. /*多个 multiple: true*/
  8. //获取值
  9. $('#Id').combobox('getValues');
  10. //设置值
  11. $('#Id').combobox('setValues','key1,key2,key3'.split(','))
  1. //自定义验证
  2. $.extend($.fn.validatebox.defaults.rules, {
  3. comboxRequired: {//combox必选验证
  4. validator: function (value, param) {
  5. return value != '--请选择--';
  6. },
  7. message: '该项为必选项.'
  8. },
  9. number: {//整数和小数验证
  10. validator: function (value) {
  11. var reg = /^\d+(\.\d+)?$/;
  12. return reg.test(value);
  13. },
  14. message: '请输入数字,并确保格式正确'
  15. },
  16. maxLength: {
  17. validator: function (value, param) {
  18. return value.length <= param[0];
  19. },
  20. message: '请输入长度为{0}的文本'
  21. },
  22. minLength: {
  23. validator: function(value, param){
  24. return value.length >= param[0];
  25. },
  26. message: 'Please enter at least {0} characters.'
  27. }
  28. });
  1. //验证调用-comboxRequired
  2. $("#select_ID").combobox({
  3. url: '',
  4. valueField: 'ID',
  5. textField: 'Name',
  6. editable: false,
  7. validType: 'comboxRequired',
  8. showblank: true,
  9. onSelect: function (row) {
  10. $("#select_ID").val(row.id);
  11. }
  12. });
  1. <input type="text" class="easyui-validatebox validatebox-text" validtype="number" />
  2. <input id="txtCertificateNumber" name="txtCertificateNumber" type="text" class="easyui-validatebox" validtype="number" data-options="required:true,validType:'maxLength[40]'" />
  1. //自定义验证
  2. $.extend($.fn.validatebox.defaults.rules, {
  3. isValidIP: {
  4. validator: function (value) {
  5. 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])$/
  6. return reg.test(value);
  7. },
  8. message: '请输入正确IP格式'
  9. }
  10. });
  11.  
  12. //IP验证-调用
  13. if (isValidIP(ProtocolIP) == false) {
  14. showTipsMsg("IP格式不正确!", '2500', '3');
  15. return;
  16. }

tree

  1. //tree checkbox全选反选
  2. function treeCheckedAll(bl, treeMenu) {
  3. $treeMenu = $('#' + treeMenu);
  4. if (bl) {
  5. var nodes = $treeMenu.tree('getChecked', 'unchecked');
  6. for (var i = 0; i < nodes.length; i++) {
  7. var node = $treeMenu.tree('find', nodes[i].id);//查找节点
  8. $treeMenu.tree('check', node.target);//将得到的节点选中
  9. }
  10. } else {
  11. var nodes = $treeMenu.tree('getChecked');
  12. for (var i = 0; i < nodes.length; i++) {
  13. var node = $treeMenu.tree('find', nodes[i].id);
  14. $treeMenu.tree('uncheck', node.target);
  15. }
  16. }
  17. }
  1. //checkbox控制单选
  2. $('#tree').tree({
  3. url:'xxx',
  4. checkbox: true,//出现checkbox
  5. onlyLeafCheck: true,//只允许选择子节点
  6. onCheck: treeSingleCheckCtrl//核心,单选控制
  7. });
  8.  
  9. //单选控制
  10. function treeSingleCheckCtrl(node, checked) {
  11. var elementId = 'tree';//元素ID
  12. if (checked) {
  13. var allCheckedNodes = $('#' + elementId).tree("getChecked");
  14. for (var i = ; i < allCheckedNodes.length; i++) {
  15. var tempNode = allCheckedNodes[i];
  16. if (tempNode.id != node.id) {
  17. $('#' + elementId).tree('uncheck', tempNode.target);
  18. }
  19. }
  20. }
  21. }
  22.  
  23. //同级-单选控制
  24. function treeSameSingleCheckCtrl(node, checked) {
  25. var elementId = 'tree';//元素ID
  26. if (checked) {
  27. $tree = $('#' + elementId);
  28. var pNode = $tree.tree('getParent', node.target);
  29. var tNodes = $tree.tree('getChildren', pNode.target);
  30.  
  31. for (var i = ; i < tNodes.length; i++) {
  32. if (tNodes[i].id != node.id) {
  33. $tree.tree('uncheck', tNodes[i].target);
  34. }
  35. }
  36. }
  37. }

只允许选择子节点 onlyLeafCheck: true

  1. onBeforeSelect: function (node) {
  2. //返回树对象
  3. var tree = $(this).tree;
  4. //选中的节点是否为叶子节点,如果不是叶子节点,清除选中
  5. var isLeaf = tree('isLeaf', node.target);
  6. if (!isLeaf) {
  7. return false;
  8. }
  9. }
  10.  
  11. //或onBeforeSelect、onSelect触发
  12.  
  13. //返回树对象
  14. var tree = $(this).tree;
  15. //选中的节点是否为叶子节点,如果不是叶子节点,清除选中
  16. var isLeaf = tree('isLeaf', node.target);
  17. if (!isLeaf) {
  18. //清除选中
  19. //$('#tree').treegrid("unselect", node.target);
  20. $('#tree').treegrid("unselect");
  21. return false;
  22. }
  1. //easyUI中layout布局隐藏动态实现
  2.  
  3. /**
  4. * layout方法扩展
  5. * @param {Object} jq
  6. * @param {Object} region
  7. */
  8. $.extend($.fn.layout.methods, {
  9. /**
  10. * 面板是否存在和可见
  11. * @param {Object} jq
  12. * @param {Object} params
  13. */
  14. isVisible: function(jq, params) {
  15. var panels = $.data(jq[0], 'layout').panels;
  16. var pp = panels[params];
  17. if(!pp) {
  18. return false;
  19. }
  20. if(pp.length) {
  21. return pp.panel('panel').is(':visible');
  22. } else {
  23. return false;
  24. }
  25. },
  26. /**
  27. * 隐藏除某个region,center除外。
  28. * @param {Object} jq
  29. * @param {Object} params
  30. */
  31. hidden: function(jq, params) {
  32. return jq.each(function() {
  33. var opts = $.data(this, 'layout').options;
  34. var panels = $.data(this, 'layout').panels;
  35. if(!opts.regionState){
  36. opts.regionState = {};
  37. }
  38. var region = params;
  39. function hide(dom,region,doResize){
  40. var first = region.substring(0,1);
  41. var others = region.substring(1);
  42. var expand = 'expand' + first.toUpperCase() + others;
  43. if(panels[expand]) {
  44. if($(dom).layout('isVisible', expand)) {
  45. opts.regionState[region] = 1;
  46. panels[expand].panel('close');
  47. } else if($(dom).layout('isVisible', region)) {
  48. opts.regionState[region] = 0;
  49. panels[region].panel('close');
  50. }
  51. } else {
  52. panels[region].panel('close');
  53. }
  54. if(doResize){
  55. $(dom).layout('resize');
  56. }
  57. };
  58. if(region.toLowerCase() == 'all'){
  59. hide(this,'east',false);
  60. hide(this,'north',false);
  61. hide(this,'west',false);
  62. hide(this,'south',true);
  63. }else{
  64. hide(this,region,true);
  65. }
  66. });
  67. },
  68. /**
  69. * 显示某个region,center除外。
  70. * @param {Object} jq
  71. * @param {Object} params
  72. */
  73. show: function(jq, params) {
  74. return jq.each(function() {
  75. var opts = $.data(this, 'layout').options;
  76. var panels = $.data(this, 'layout').panels;
  77. var region = params;
  78.  
  79. function show(dom,region,doResize){
  80. var first = region.substring(0,1);
  81. var others = region.substring(1);
  82. var expand = 'expand' + first.toUpperCase() + others;
  83. if(panels[expand]) {
  84. if(!$(dom).layout('isVisible', expand)) {
  85. if(!$(dom).layout('isVisible', region)) {
  86. if(opts.regionState[region] == 1) {
  87. panels[expand].panel('open');
  88. } else {
  89. panels[region].panel('open');
  90. }
  91. }
  92. }
  93. } else {
  94. panels[region].panel('open');
  95. }
  96. if(doResize){
  97. $(dom).layout('resize');
  98. }
  99. };
  100. if(region.toLowerCase() == 'all'){
  101. show(this,'east',false);
  102. show(this,'north',false);
  103. show(this,'west',false);
  104. show(this,'south',true);
  105. }else{
  106. show(this,region,true);
  107. }
  108. });
  109. }
  110. });
  111.  
  112. $('#id').layout('hidden','north');
  113. $('#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. VS Code常用快捷键大全

    常用 General 按 Press 功能 Function Ctrl + Shift + P,F1 显示命令面板 Show Command Palette Ctrl + P 快速打开 Quick O ...

  2. js 学习之路10:try异常处理和第一个js小程序

    try 语句测试代码块的错误. catch 语句处理错误. throw 语句创建自定义错误. 1. try/catch语句 catch语句用来捕获try代码块中的错误,并执行自定义的语句来处理它. 语 ...

  3. Centos7上安装单机版redis

    Centos 7 上安装单机版redis Redis 官网下载 https://redis.io/download 1. 下载.解压.安装 cd /usr/local #wget http://dow ...

  4. PHP 函数漏洞总结

    1.MD5 compare漏洞 PHP在处理哈希字符串时,会利用"!="或"=="来对哈希值进行比较,它把每一个以"0E"开头的哈希值都解释 ...

  5. 剑指offer:调整数组顺序使奇数位于偶数前面

    题目 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有奇数位于数组的前半部分,所有偶数位于数组的后半部分. 分析 事实上,这个题比较简单,很多种方式都可以实现,但是其时间复杂度或空间复 ...

  6. 把python学的让自己成为智障的day14

    智障的第14天,今天还是装饰器,这也是这个难点,装饰器也是函数的其中一种,所以需要有返回值才能返回到之后要执行的函数中,当然,作为函数可以在其中带上参数,装饰器只是比较特殊,自然也可以带参数,目前来说 ...

  7. html与ios交互方法 WebViewJavascriptBridge

    WebViewJavascriptBridge 1.html调用ios的方法 <!DOCTYPE html> <html lang="en"> <he ...

  8. Oracle完全卸载详解

    Oracle数据库的安装这里就不说了,网上应该有很多,但是oracle数据库的卸载却找不到一个比较详细的完整卸载的说明.很多卸载不完全,会有遗留数据,影响后续的安装.所以自己整理一份以前上学的时候学习 ...

  9. CRM销售人员针对的客户的权重分配的思想

    巧妙使用权重http://www.ziawang.com/article/52/ Django 项目CRM总结 - Pythia丶陌乐 - 博客园https://www.cnblogs.com/sup ...

  10. laravel 定义翻译字符串

    https://learnku.com/docs/laravel/5.6/localization/1376 // 全景链接$data['share_phone'] = trans('web.host ...