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. ...
随机推荐
- Mysql数据库中CURRENT_TIMESTAMP和ON UPDATE CURRENT_TIMESTAMP区别
如图所示,mysql数据库中,当字段类型为timestamp时,如果默认值取CURRENT_TIMESTAMP,则在insert一条记录时,end_time的值自动设置为系统当前时间,如果勾选了 ON ...
- BUPT复试专题—旋转图像(2014)
题目描述 将一幅只含有01像素点的图片进行顺时针旋转,旋转的角度仅包含0°,90°,180°,270° 输入 第一行一个整数T(<50)表示输入的组数 每组测试数据第一行是两个整数N和M(< ...
- mock.js 的用法 -- 脱离后端独立开发,实现增删改查功能
在我们的生产实际中,后端的接口往往是较晚才会出来,并且还要写接口文档,于是我们的前端的许多开发都要等到接口给我们才能进行,这样对于我们前端来说显得十分的被动,于是有没有可以制造假数据来模拟后端接口呢, ...
- 【分享】利用Apache的Htaccess Files命令限制訪问文件类型,Files正则
假设你在你的模板目录中有非常多PSD HTML模板,那么用接下来这个htaccess文件能够保护限制訪问: 文件D:\WebSite\ZBPHP.COM\www\Tpl\.htaccess 所有源代码 ...
- android binder 机制三(匿名Service)
什么是匿名Service?凡是没有到ServiceManager上注冊的Service,都是匿名Service. 还是拿上一篇的样例来举例,看代码: status_t MediaPlayer::set ...
- PHP-MySQL,PHP-MySQLi,PDO的差异
PHP-MySQL是PHP操作MySQL数据库最原始的Extension ,PHP-MySQLi的i代表Improvement ,提供了更加高级的功能,就Extension而言,本身也增加了安全性.而 ...
- mvn -v 报错解决办法
由于近期公司需求,我找到了个maven教程:http://wentao365.iteye.com/blog/903396 安装maven其实很简单,就是在Apache官网下载需要的maven包,然后配 ...
- windows下在eclipse上远程连接hadoop集群调试mapreduce错误记录
第一次跑mapreduce,记录遇到的几个问题,hadoop集群是CDH版本的,但我windows本地的jar包是直接用hadoop2.6.0的版本,并没有特意找CDH版本的 1.Exception ...
- Preference+PreferenceArray+DataModel
在Mahout中,用户的喜好被抽象为一个Preference,包含了userId,itemId和偏好值(user对item的偏好).Preference是一个接口,它有一个通用的实现是GenericP ...
- java sleep和wait的区别和联系
Thread.sleep不会改变锁的行为,如果当前线程拥有锁,那么当前线程sleep之后,该锁不会被释放. Thread.sleep和Object.wait都会暂停当前的线程,让出cpu.Thread ...