步骤 1:创建 Tabs

  1. <div style="margin-bottom:10px">
  2. <a href="#" class="easyui-linkbutton" onclick="addTab('google','http://www.google.com')">google</a>
  3. <a href="#" class="easyui-linkbutton" onclick="addTab('jquery','http://jquery.com/')">jquery</a>
  4. <a href="#" class="easyui-linkbutton" onclick="addTab('easyui','http://jeasyui.com/')">easyui</a>
  5. </div>
  6. <div id="tt" class="easyui-tabs" style="width:400px;height:250px;">
  7. <div title="Home">
  8. </div>
  9. </div>

步骤 2:实现 'addTab' 函数

  1. function addTab(title, url){
  2. if ($('#tt').tabs('exists', title)){
  3. $('#tt').tabs('select', title);
  4. } else {
  5. var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>';
  6. $('#tt').tabs('add',{
  7. title:title,
  8. content:content,
  9. closable:true
  10. });
  11. }
  12. }

我们使用 'exists' 方法来判断 tab 是否已经存在,如果已存在则激活 tab。如果不存在则调用 'add' 方法来添加一个新的 tab 面板。

例子:

<table id="HazardousId" class="easyui-datagrid" style="width:auto;height:500px;" ></table>

<div id="shHazardous" style="padding:5px;height:auto">
<div>
<span class="other">
废物类别代码: <input class="easyui-textbox HazardousWType" style="width:130px">
</span>
<span class="other">
废物类别名称: <input class="easyui-textbox HazardousWTypeD" style="width:130px">
</span>
<span class="other">
行业来源: <input class="easyui-textbox industrySources" style="width:130px">
</span>
<span class="other">
废物代码: <input class="easyui-textbox HazardousWCode" style="width:130px">
</span>
<span class="other">
危险废物: <input class="easyui-textbox HazardousWDis" style="width:130px">
</span>
<span class="other">
危险特性: <input class="easyui-textbox HazardousWFeatures" style="width:130px">
</span>
<a id="searchbtn" href="#" class="easyui-linkbutton searchbtn" iconcls="icon-search">Search</a>
</div>
<div>

ESc  浮框退出      table 自适应浏览器窗口

$(function () {
document.onkeyup = function (e) {
e = e || window.event;
var code = e.which || e.keyCode;
if (code == 27) {
$('#dlg').dialog('close');
}
}
$(window).resize(function () {
$('#V3CompanyApplyId').datagrid('resize', {
height: ($(window).height())
});
});
});

$(function () {
var tableId = "HazardousId";
var controller = "Hazardous";
var urlGetTbById = "/" + controller + "/GetHazardousWById";
var urlGetTbOption = "/" + controller + "/MeasurementCalculateOption";

//搜索功能string是类型,strWhere是变量,1=1 是常量,这个本身是没有什么意义的,只是为了方便在后面加上if(字段1 !=“”)
//strWhere +=“ and 字段1 = ”;
//if(字段2 !=“”)
//strWhere +=“ and 字段2 = ”;
//......

//如果字段都为空 还有 where 1=1 呢 也不影响查询,如果 只剩下where 不就报错了么..

$('#shHazardous .searchbtn').on('click', function () {
var strWhere = " 1=1 ";
if ($('.other .HazardousWType').val() != "") {
strWhere += "and T.HazardousWType like '%" + $('.other .HazardousWType').val() + "%'";
}
if ($('.other .HazardousWTypeD').val() != "") {
strWhere += "and T.HazardousWTypeD like '%" + $('.other .HazardousWTypeD').val() + "%'";
}
if ($('.other .industrySources').val() != "") {
strWhere += "and T1.industrySources like '%" + $('.other .industrySources').val() + "%'";
}
if ($('.other .HazardousWCode').val() != "") {
strWhere += "and T2.HazardousWCode like '%" + $('.other .HazardousWCode').val() + "%'";
}
if ($('.other .HazardousWDis').val() != "") {
strWhere += "and T2.HazardousWDis like '%" + $('.other .HazardousWDis').val() + "%'";
}
if ($('.other .HazardousWFeatures').val() != "") {
strWhere += "and T2.HazardousWFeatures like '%" + $('.other .HazardousWFeatures').val() + "%'";
}
console.log(strWhere);
$('#' + tableId).datagrid("reload", { strWhere: strWhere, page: 1, rows: 10 });
});

var StorageManager = [
{
type: 1,
key: "HazardousWType",
name: "废物类别代码",
val: "",
dpData: ""
},
{
type: 1,
key: "HazardousWTypeD",
name: "废物列别名称",
val: "",
dpData: ""
},
{
type: 1,
key: "industrySources",
name: "行业来源",
val: "",
},
{
type: 1,
key: "HazardousWCode",
name: "废物代码",
val: "",
},
{
type: 1,
key: "HazardousWDis",
name: "危险废物",
val: "",
},
{
type: 1,
key: "HazardousWFeatures",
name: "危险特性",
val: "",
}];

function UIModifyInit(index, type) {
$.ajax({
url: rootUrl + urlGetTbById,
data: { id: index },
async: false,     //false为同步         默认是true;
type: "POST",
success: function (msg) {
//alert(msg);
//msg = $.parseJSON(msg);
if (msg.success = true) {
console.log(msg);
dataOption.msgToModelCompany($.parseJSON(msg.Memo)[0], StorageManager, 1);
dataOption.createDom(StorageManager, "userInfoSelect", type);

}
else {
// console.log(msg.msg);
}
},
dataType: "json"
});

};
$('#' + tableId).datagrid({
height: 500,
url: rootUrl + '/' + controller + '/GetHazardousW',
method: 'post',
fixColumnSize: true,       // 固定列的尺寸
striped: true,                 // 就把行条纹化。(即奇偶行使用不同背景色)
fitColumns: true,           //自动扩大或缩小列的尺寸以适应表格的宽度并且防止水平滚动。
fit: true,                       //折叠容器的大小将填充父容器   自适应
singleSelect: false,         //设置为 true,则只允许选中一行。
rownumbers: true,          //显示带有行号的列
pagination: true,             //True 就会在 datagrid 的底部显示分页栏
nowrap: false,                 //超出部分换行
pageSize: 20,                   //初始化页码尺寸
pageList: [10, 20, 50, 100, 150, 200],         //初始化页面尺寸的选择列表
showFooter: true,              
pageNumber: 1,           //初始化页码。
toolbar: '#shHazardous',
columns: [[
{ field: 'HazardousWType', title: '废物类别代码', width: '10%', align: 'center', fixed: 'true' },
{ field: 'HazardousWTypeD', title: '废物类别名称', width: '15%', align: 'center', fixed: 'true' },
{ field: 'industrySources', title: '行业来源', width: '15%', align: 'center', fixed: 'true' },
{ field: 'HazardousWCode', title: '废物代码', width: '10%', align: 'center', fixed: 'true' },
{ field: 'HazardousWDis', title: '危险废物', width: '40%', align: 'center', fixed: 'true' },
{ field: 'HazardousWFeatures', title: '危险特性', width: '10%', align: 'center', fixed: 'true' },
//{
// field: 'Id', title: '详细信息', width: '10%', align: 'center',
// formatter: function (value, row, index) {
// var addHtml = '<a class="approveApply ob-details" ob-id=' + row.id + ' style="color:blue">详细信息</a>';
// return addHtml ;
// }
// },
]],
onDblClickRow: function (rowIndex, rowData) {
$('#dlg').dialog('open');
UIModifyInit(rowData.id, 1);
$('.ob-addBtn').remove();
}
});
$('#' + tableId).prev().on("click", ".ob-details", function () {
$('#dlg').dialog('open');
UIModifyInit($(this).attr("ob-id"), 1);
$('.ob-addBtn').remove();
});
});
</script>

easyui 动态添加标签页,总结的更多相关文章

  1. EasyUI创建异步树形菜单和动态添加标签页tab

    创建异步树形菜单 创建树形菜单的ul标签 <ul class="easyui-tree" id="treeMenu"> </ul> 写j ...

  2. ES6面向对象 动态添加标签页

    HTML <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml&quo ...

  3. EasyUI 布局 - 动态添加标签页(Tabs)

    首先导入js <link rel="stylesheet" href="../js/easyui/themes/default/easyui.css"&g ...

  4. 解决EasyUI动态添加标签渲染问题

    以下代码用于Js脚本中: var Work_Content_Back = "<table width='99%' class='table' style='margin-bottom: ...

  5. js 面向对象 动态添加标签

    有点逻辑 上代码 thml布局 点击查看代码 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  6. EasyUI中动态生成标签页

    这是最近学到的内容,当时是有思路但是不知道怎么获取当前的点击对象,就没有实现功能,通过更深入的学习,我知道了不仅仅是Java,Oracle中有一个this,同样的EasyUI中也存在一个this,来获 ...

  7. easyui 动态添加组件 要重新渲染

    做项目时动态添加组件是常有的事,easyui动态添加组件时样式会失效,这是因为这个组件没有经过 easyui的解析器解析, 比如:   <pre name="code" cl ...

  8. jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法

    博客分类: jquery-easyui jQueryAjax框架HTML  现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...

  9. easyui 动态添加input标签

    动态添加easyui控件<input class=" easyui-textbox" > 这样是无效的,因为easyui没有实时监控,所以必须动态渲染$.parser. ...

随机推荐

  1. 体验Windows 2008 R2的RemoteApp

    [说明]这是<中小企业虚拟机解决方案大全>一书中部分章节的摘抄.该书预计于2009年12月初由<电子工业出版社>出版,敬请期待!   通过远程桌面服务,组织可以为用户提供随时随 ...

  2. 一道题目- Find the smallest range that includes at least one number from each of the k lists

    You have k lists of sorted integers. Find the smallest range that includes at least one number from ...

  3. mini-uboot 启动过程简单分析

    单片机有最小系统,所谓最小系统,就是单片机能正常工作所需要的最少外设.对于Uboot来说,同样有个最小系统,因为Uboot最主要的功能就是引导内核.下面我们通过一个简单的Mini-Uboot来分析Ub ...

  4. GoogLeNet系列解读

    GoogLeNet Incepetion V1 这是GoogLeNet的最早版本,出现在2014年的<Going deeper with convolutions>.之所以名为“GoogL ...

  5. weex 项目开发(五)自定义 过滤函数 和 混合 及 自定义 Header 组件

    1.自定义  过滤函数 src / filters / index.js /** * 自定义 过滤函数 */ export function host (url) { if (!url) return ...

  6. 全文索引--自己定义chinese_lexer词典

    本文来具体解释一下怎样自己定义chinese_lexer此法分析器的词典 初始化数据 create table test2 (str1 varchar2(2000),str2varchar2(2000 ...

  7. [Python-MATLAB] 在Python中调用MATLAB的API

    可以参考官方的说明文档: http://cn.mathworks.com/help/matlab/matlab_external/get-started-with-matlab-engine-for- ...

  8. 我为什么不喜欢 CoreData

    我为什么不喜欢 CoreData   我一直不喜欢 Core Data,以前不太敢明目张胆地这么表达,现在收集到越来越多相关的信息,所以给大家分享一下,我为什么不喜欢 Core Data. Core ...

  9. WebService:JAX-WS实现WebService

    WebService和Java核心技术中的RMI一样用于实现异构平台上的应用程序之间数据的交互,唯一不同的是这样的技术屏蔽了语言之间的差异.这也是其大行其道的原因. 实现WebService的技术多种 ...

  10. 2016/06/09 ThinkPHP3.2.3使用分页

    效果图: