首页 > 代码库 > easyui 动态添加标签页，总结

easyui 动态添加标签页，总结

2024-10-07 06:55:39   217人阅读

步骤 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="http://www.mamicode.com/‘+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="http://www.mamicode.com/#" 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 动态添加标签页，总结


联系
我们