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>
easyui 动态添加标签页,总结的更多相关文章
- EasyUI创建异步树形菜单和动态添加标签页tab
创建异步树形菜单 创建树形菜单的ul标签 <ul class="easyui-tree" id="treeMenu"> </ul> 写j ...
- ES6面向对象 动态添加标签页
HTML <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml&quo ...
- EasyUI 布局 - 动态添加标签页(Tabs)
首先导入js <link rel="stylesheet" href="../js/easyui/themes/default/easyui.css"&g ...
- 解决EasyUI动态添加标签渲染问题
以下代码用于Js脚本中: var Work_Content_Back = "<table width='99%' class='table' style='margin-bottom: ...
- js 面向对象 动态添加标签
有点逻辑 上代码 thml布局 点击查看代码 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- EasyUI中动态生成标签页
这是最近学到的内容,当时是有思路但是不知道怎么获取当前的点击对象,就没有实现功能,通过更深入的学习,我知道了不仅仅是Java,Oracle中有一个this,同样的EasyUI中也存在一个this,来获 ...
- easyui 动态添加组件 要重新渲染
做项目时动态添加组件是常有的事,easyui动态添加组件时样式会失效,这是因为这个组件没有经过 easyui的解析器解析, 比如: <pre name="code" cl ...
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
博客分类: jquery-easyui jQueryAjax框架HTML 现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...
- easyui 动态添加input标签
动态添加easyui控件<input class=" easyui-textbox" > 这样是无效的,因为easyui没有实时监控,所以必须动态渲染$.parser. ...
随机推荐
- 体验Windows 2008 R2的RemoteApp
[说明]这是<中小企业虚拟机解决方案大全>一书中部分章节的摘抄.该书预计于2009年12月初由<电子工业出版社>出版,敬请期待! 通过远程桌面服务,组织可以为用户提供随时随 ...
- 一道题目- 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 ...
- mini-uboot 启动过程简单分析
单片机有最小系统,所谓最小系统,就是单片机能正常工作所需要的最少外设.对于Uboot来说,同样有个最小系统,因为Uboot最主要的功能就是引导内核.下面我们通过一个简单的Mini-Uboot来分析Ub ...
- GoogLeNet系列解读
GoogLeNet Incepetion V1 这是GoogLeNet的最早版本,出现在2014年的<Going deeper with convolutions>.之所以名为“GoogL ...
- weex 项目开发(五)自定义 过滤函数 和 混合 及 自定义 Header 组件
1.自定义 过滤函数 src / filters / index.js /** * 自定义 过滤函数 */ export function host (url) { if (!url) return ...
- 全文索引--自己定义chinese_lexer词典
本文来具体解释一下怎样自己定义chinese_lexer此法分析器的词典 初始化数据 create table test2 (str1 varchar2(2000),str2varchar2(2000 ...
- [Python-MATLAB] 在Python中调用MATLAB的API
可以参考官方的说明文档: http://cn.mathworks.com/help/matlab/matlab_external/get-started-with-matlab-engine-for- ...
- 我为什么不喜欢 CoreData
我为什么不喜欢 CoreData 我一直不喜欢 Core Data,以前不太敢明目张胆地这么表达,现在收集到越来越多相关的信息,所以给大家分享一下,我为什么不喜欢 Core Data. Core ...
- WebService:JAX-WS实现WebService
WebService和Java核心技术中的RMI一样用于实现异构平台上的应用程序之间数据的交互,唯一不同的是这样的技术屏蔽了语言之间的差异.这也是其大行其道的原因. 实现WebService的技术多种 ...
- 2016/06/09 ThinkPHP3.2.3使用分页
效果图: