easyui 动态添加标签页，总结
步骤 1：创建 Tabs
- <div style="margin-bottom:10px">
- <a href="#" class="easyui-linkbutton" onclick="addTab('google','http://www.google.com')">google</a>
- <a href="#" class="easyui-linkbutton" onclick="addTab('jquery','http://jquery.com/')">jquery</a>
- <a href="#" class="easyui-linkbutton" onclick="addTab('easyui','http://jeasyui.com/')">easyui</a>
- </div>
- <div id="tt" class="easyui-tabs" style="width:400px;height:250px;">
- <div title="Home">
- </div>
- </div>
步骤 2：实现 'addTab' 函数
- function addTab(title, url){
- if ($('#tt').tabs('exists', title)){
- $('#tt').tabs('select', title);
- } else {
- var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>';
- $('#tt').tabs('add',{
- title:title,
- content:content,
- closable:true
- });
- }
- }
我们使用 '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>
