tspace下的listPage.html
<#include "/common/head.html"/> <#if head.form_type == 2> <div id="subLayout" class="easyui-layout" data-options="fit:true, border:false"> <div data-options="region:'center', border:false"> </#if> <table id="dg"></table> <div id="tb" style="padding:2px 5px;"> <div class="wrap_search"> <#list fieldList as item><#if item.is_search == 1><#if item.dict??> <span class="search_item"> <span class="item_text">${lumn_name}: </span> <span class="item_obj"> <input class="easyui-combobox" name="${item.field_name}" id="${item.field_name}" value="${queryPara[item.field_name!]!}" style="width:100px" data-options=" valueField: 'id', textField: 'text', data: [ {id:'', text:''}<#list item.dict.keySet() as key>,{id:'${key}', text:'${(key)}'}</#list> ] " /> </span> </span> <#else><#assign easyui_type="easyui-textbox" /> <#if item.data_type=='timestamp' || item.data_type=='datetime' || item.data_type=='date'><#assign easyui_type="easyui-datebox" /></#if> <#if item.search_type == 2><span class="search_item search_between"> <span class="item_text">${lumn_name}: </span> <span class="item_obj"> <input class="${easyui_type}" name="_start_${item.field_name}" id="_start_${item.field_name}" value="${queryPara[item.field_name!]!}"/> ~ <input class="${easyui_type}" name="_end_${item.field_name}" id="_end_${item.field_name}" value="${queryPara[item.field_name!]!}"/> </span> </span> <#else> <span class="search_item"> <span class="item_text">${lumn_name}: </span> <span class="item_obj"> <input class="${easyui_type}" type="text" name="${item.field_name}" id="${item.field_name}" value="${queryPara[item.field_name!]!}"/> </span> </span> </#if></#if></#if></#list></div> <div style="text-align: left; margin:6px;"> <a href="javascript:void(0)" class="easyui-linkbutton addBtn" iconCls="glyphicon-plus" plain="true" οnclick="add()">增加</a> <a href="javascript:void(0)" class="easyui-linkbutton updateBtn" iconCls="glyphicon-pencil" plain="true" οnclick="update()">编辑</a> <a href="javascript:void(0)" class="easyui-linkbutton delBtn" iconCls="glyphicon-remove" plain="true" οnclick="del()">删除</a> <a href="javascript:void(0)" class="easyui-linkbutton detailBtn" iconCls="glyphicon-map-marker" plain="true" οnclick="detail()">详情</a> <a href="javascript:void(0)" class="easyui-linkbutton exportBtn" iconCls="glyphicon-export" plain="true" οnclick="exportCsv()">导出</a> <#list topList as item> <a href="#" class="easyui-linkbutton exBtn${item.id}" iconCls="${item.btn_icon!''}" plain="true" οnclick="btnClick${item.id}(' + index + ')">${item.btn_name}</a> </#list><div id="searchBtnWrap" style="float:right; padding-right:40px;"> <a href="javascript:void(0)" class="easyui-linkbutton color1" iconCls="glyphicon-search" οnclick="tspaceSearch(this)">搜索</a> <a href="javascript:void(0)" class="easyui-linkbutton color2" iconCls="glyphicon-repeat" οnclick="flushPage()">重置</a> </div> </div> </div> <#if head.form_type == 2></div> <div data-options="region:'east',split:true, border:false, collapsed:true, width:window.subPageWidth||'40%', title:window.subPageTitle||'子页面', onCollapse: function(){_openSubPageFlag=false;}"> <iframe id="subIframe" class="easyui-panel" data-options="fit:true,border:false"></iframe> </div> </div> </#if><script type="text/javascript"> var datagrid = $("#dg"); var dgOptions = {rownumbers:true, fit:true, border:false, rownumbers:true, url:'listData', method:'post', toolbar:'#tb', pageSize: 20, pagination:true, multiSort:true, sortName: getInitParam().sort, sortOrder: getInitParam().order, queryParams: getInitParam(), <#if footerFieldList.size() gt 0>showFooter: true, </#if> columns: [[{field:'${head.id_field}', checkbox:true}<#list fieldList as item> <#if item.is_show_list == 1 && item.field_name != head.id_field> ,{field:'${item.field_name}', title: '${lumn_name}', width:${lumn_length}, sortable: true <#if item.input_type == 'easyui-filebox_img'>,formatter: function(value){return formatterDgImage(value)}</#if>}</#if> </#list> <#if lineList.size() gt 0>,{field:'operate', title: '操作', width: window.operateWidth || 120, formatter: function(value, row, index){var html = ""; <#list lineList as item> html += '<a class="operate" href="###" οnclick="btnClick${item.id}(' + index + ')">${item.btn_name}</a>';</#list> return html; } }</#if> ]],loadFilter: function(data) {if(sult && sult == 'fail') { //失败时,错误消息提示 showWarnMsg(data.msg); return {}; }else {return data; }} }; $(function() {handleAuthDataRule(); datagrid.datagrid(dgOptions); });function tspaceSearch() {var param = tspaceGetParam(); datagrid.datagrid("load", {queryParams: param}) }function tspaceGetParam() {var param = {}; $("#tb :input[name]").each(function(i, item) {if($(item).val()) {param[$(item).attr("name")] = $(item).val(); }}); return param; }function getInitParam() {var param = {}; $("#tb :input[name]").each(function(i, item) {if($(item).val()) {param["queryParams[" + $(item).attr("name") + "]"] = $(item).val(); }}); if("${sort!''}") {param.sort = "${sort!''}"; der = "${order!'asc'}"; }return param; }var initPara = tspaceGetParam(); function add() {top.window.subPage.loadCurrDatagrid = function() {showMsg("增加成功!"); datagrid.datagrid("load"); }top.openWindow("${head.form_name}-增加", getCurrUrl("addPage") + "?" + $.param(initPara), {size: '${head.dialog_size!}'}); }function update() {var rowsSel = datagrid.datagrid("getSelections"); if(rowsSel.length != 1) {showWarnMsg("请选择需要编辑的一条数据!"); return; }var id = rowsSel[0].${head.id_field}; top.window.subPage.loadCurrDatagrid = function() {showMsg("更新成功!"); datagrid.datagrid("reload"); }top.openWindow("${head.form_name}-编辑", getCurrUrl("updatePage") + "?id=" + id, {size: '${head.dialog_size!}'}); }function del() {var ids = []; $.each(datagrid.datagrid("getSelections"), function(i, item) {ids.push(item.${head.id_field}); }); if(ids.length < 1) {showWarnMsg("请选择需要删除的数据!"); return; }confirmMsg("确认删除?", function() {$.post("delete", {id: ids}, function(data) {showMsg("删除成功!"); datagrid.datagrid("reload"); }); }); }function detail() {var rowsSel = datagrid.datagrid("getSelections"); if(rowsSel.length != 1) {showWarnMsg("请选择需要查看的一条数据!"); return; }var id = rowsSel[0].${head.id_field}; top.openWindow("${head.form_name}-详情", getCurrUrl("detailPage") + "?id=" + id, {size: '${head.dialog_size!}'}); }function exportCsv() {var option = datagrid.datagrid("options"); var param = option.queryParams; param.sortName = option.sortName; param.sortOrder = option.sortOrder; window.location.href = "exportCsv?" + $.param(param); }//按钮事件 <#list btnList as item> window.btnClick${item.id} = ${item.func_content}; </#list> /*** 打开子页*/ var _openSubPageFlag = false; function _openSubPage(pageUrl) {if(!_openSubPageFlag) {$("#subLayout").layout("expand", "east"); setTimeout(function() {$("#subIframe").attr("src", pageUrl); }, 600); _openSubPageFlag = true; }else {$("#subIframe").attr("src", pageUrl); } }//扩展js <#list jsList as item> <#if item.page?contains("list")> ${item.jsContentData!item.js_content} </#if> </#list> </script> <#include "/common/dialogWindow.html"/> <#include "/common/foot.html"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tspace</title>
<link rel="icon" type="image/x-icon" href="/res/images/tspace/favicon.ico">
<link rel="stylesheet" type="text/css" href="/res/js/jquery-easyui/themes/gray/easyui.css">
<link rel="stylesheet" type="text/css" href="/res/js/jquery-easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="/res/js/jquery-easyui/themes/color.css">
<link rel="stylesheet" type="text/css" href="/res/css/common.css">
<link rel="stylesheet" type="text/css" href="/res/css/icon.css">
<script type="text/javascript">
var basePath = '';
var noAuthBtn = '';
var authField = 'status';
</script>
<script type="text/javascript" src="/res/js/jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="/res/js/jquery-easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/res/js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="/res/js/common.js"></script>
</head>
<body style="visibility: hidden;">
<table id="dg"></table>
<div id="tb" style="padding:2px 5px;">
<div class="wrap_search">
<span class="search_item">
<span class="item_text">书名: </span>
<span class="item_obj">
<input class="easyui-textbox" type="text" name="book_name" id="book_name" value=""/>
</span>
</span>
<span class="search_item">
<span class="item_text">状态: </span>
<span class="item_obj">
<input class="easyui-combobox" name="status" id="status" value="" style="width:100px" data-options="
valueField: 'id',
textField: 'text',
data: [
{id:'', text:''},{id:'0', text:'未采集'},{id:'1', text:'采集中'},{id:'2', text:'采集完'}
]
" />
</span>
</span>
<span class="search_item search_between">
<span class="item_text">创建时间: </span>
<span class="item_obj">
<input class="easyui-datebox" name="_start_create_time" id="_start_create_time" value=""/> ~ <input class="easyui-datebox" name="_end_create_time" id="_end_create_time" value=""/>
</span>
</span>
</div>
<div style="text-align: left; margin:6px;">
<a href="javascript:void(0)" class="easyui-linkbutton addBtn" iconCls="glyphicon-plus" plain="true" οnclick="add()">增加</a>
<a href="javascript:void(0)" class="easyui-linkbutton updateBtn" iconCls="glyphicon-pencil" plain="true" οnclick="update()">编辑</a>
<a href="javascript:void(0)" class="easyui-linkbutton delBtn" iconCls="glyphicon-remove" plain="true" οnclick="del()">删除</a>
<a href="javascript:void(0)" class="easyui-linkbutton detailBtn" iconCls="glyphicon-map-marker" plain="true" οnclick="detail()">详情</a>
<a href="javascript:void(0)" class="easyui-linkbutton exportBtn" iconCls="glyphicon-export" plain="true" οnclick="exportCsv()">导出</a>
<div id="searchBtnWrap" style="float:right; padding-right:40px;">
<a href="javascript:void(0)" class="easyui-linkbutton color1" iconCls="glyphicon-search" οnclick="tspaceSearch(this)">搜索</a>
<a href="javascript:void(0)" class="easyui-linkbutton color2" iconCls="glyphicon-repeat" οnclick="flushPage()">重置</a>
</div>
</div>
</div>
<script type="text/javascript">
var datagrid = $("#dg");
var dgOptions = {
rownumbers:true,
fit:true,
border:false,
rownumbers:true,
url:'listData',
method:'post',
toolbar:'#tb',
pageSize: 20,
pagination:true,
multiSort:true,
sortName: getInitParam().sort,
sortOrder: getInitParam().order,
queryParams: getInitParam(),
columns: [[
{field:'id', checkbox:true}
,{field:'source', title: '来源', width:120, sortable: true }
,{field:'book_name', title: '书名', width:120, sortable: true }
,{field:'url', title: '阅读地址', width:250, sortable: true }
,{field:'status', title: '状态', width:100, sortable: true }
,{field:'create_time', title: '创建时间', width:120, sortable: true }
]],
loadFilter: function(data) {
sult && sult == 'fail') { //失败时,错误消息提示
showWarnMsg(data.msg);
return {};
}else {
return data;
}
}
};
$(function() {
handleAuthDataRule();
datagrid.datagrid(dgOptions);
});
function tspaceSearch() {
var param = tspaceGetParam();
datagrid.datagrid("load", {
queryParams: param
})
}
function tspaceGetParam() {
var param = {};
$("#tb :input[name]").each(function(i, item) {
if($(item).val()) {
param[$(item).attr("name")] = $(item).val();
}
});
return param;
}
function getInitParam() {
var param = {};
$("#tb :input[name]").each(function(i, item) {
if($(item).val()) {
param["queryParams[" + $(item).attr("name") + "]"] = $(item).val();
}
});
if("") {
param.sort = "";
der = "asc";
}
return param;
}
var initPara = tspaceGetParam();
function add() {
top.window.subPage.loadCurrDatagrid = function() {
showMsg("增加成功!");
datagrid.datagrid("load");
}
top.openWindow("小说管理-增加", getCurrUrl("addPage") + "?" + $.param(initPara), {size: '600x400'});
}
function update() {
var rowsSel = datagrid.datagrid("getSelections");
if(rowsSel.length != 1) {
showWarnMsg("请选择需要编辑的一条数据!");
return;
}
var id = rowsSel[0].id;
top.window.subPage.loadCurrDatagrid = function() {
showMsg("更新成功!");
datagrid.datagrid("reload");
}
top.openWindow("小说管理-编辑", getCurrUrl("updatePage") + "?id=" + id, {size: '600x400'});
}
function del() {
var ids = [];
$.each(datagrid.datagrid("getSelections"), function(i, item) {
ids.push(item.id);
});
if(ids.length < 1) {
showWarnMsg("请选择需要删除的数据!");
return;
}
confirmMsg("确认删除?", function() {
$.post("delete", {id: ids}, function(data) {
showMsg("删除成功!");
datagrid.datagrid("reload");
});
});
}
function detail() {
var rowsSel = datagrid.datagrid("getSelections");
if(rowsSel.length != 1) {
showWarnMsg("请选择需要查看的一条数据!");
return;
}
var id = rowsSel[0].id;
top.openWindow("小说管理-详情", getCurrUrl("detailPage") + "?id=" + id, {size: '600x400'});
}
function exportCsv() {
var option = datagrid.datagrid("options");
var param = option.queryParams;
param.sortName = option.sortName;
param.sortOrder = option.sortOrder;
window.location.href = "exportCsv?" + $.param(param);
}
//按钮事件
/**
* 打开子页
*/
var _openSubPageFlag = false;
function _openSubPage(pageUrl) {
if(!_openSubPageFlag) {
$("#subLayout").layout("expand", "east");
setTimeout(function() {
$("#subIframe").attr("src", pageUrl);
}, 600);
_openSubPageFlag = true;
}else {
$("#subIframe").attr("src", pageUrl);
}
}
//扩展js
</script>
<div id="dialogWindow" data-options="border:'thin',collapsible:false,minimizable: false,shadow:false">
<div class="easyui-layout" data-options="fit:true,border:false">
<div data-options="region:'center',border:false" style="padding:0px;">
<iframe src="" class="easyui-panel" data-options="fit:true,border:false" frameborder="0"></iframe>
</div>
<div data-options="region:'south',border:false" style="text-align:right;padding:12px 12px;border-top:0px solid #ddd;">
<a class="easyui-linkbutton color1" href="javascript:void(0)" οnclick="javascript:subPage.save();" style="width:80px">保存</a>
<a class="easyui-linkbutton color2" href="javascript:void(0)" οnclick="javascript:closeWindow()" style="width:80px">取消</a>
</div>
</div>
</div>
<div id="popupWindow" data-options="width:500,height:300,border:'thin',cls:'c9',collapsible:false,shadow:false,minimizable: false,maximizable: false" style="display: none;">
<iframe src="" class="easyui-panel" data-options="fit:true, border:false" frameborder="0"></iframe>
</div><script>
var _hmt = _hmt || [];
(function() {
var hm = ateElement("script");
hm.src = "//hm.baidu/hm.js?96bb51056dd3bece3de02a351f072069";
var s = ElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</body>
</html>
EasyUI中的tabs.
1、通过标记创建标签页(Tabs)
从标记创建标签页(Tabs)更容易,我们不需要写任何 JavaScript 代码。记住把 'easyui-tabs' class 添加到 <div> 标记。每个标签页面板(tab panel)通过子 <div> 标记被创建,其用法与面板(panel)一样。
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;"><div title="Tab1" style="padding:20px;display:none;">tab1</div><div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">tab2</div><div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">tab3</div>
</div>
2、编程创建标签页(Tabs)
现在我们编程创建标签页(Tabs),我们同时捕捉 'onSelect' 事件。
$('#tt').tabs({border:false,onSelect:function(title){alert(title+' is selected');}
});
通过迷你工具添加一个新的标签页面板(tab panel),迷你工具图标(8x8)放置在关闭按钮前。
// 添加一个新的标签页面板(tab panel)
$('#tt').tabs('add',{title:'New Tab',content:'Tab Body',closable:true,tools:[{iconCls:'icon-mini-refresh',handler:function(){alert('refresh');}}]
});
// 获取选中的标签页面板(tab panel)和它的标签页(tab)对象
var pp = $('#tt').tabs('getSelected');
var tab = pp.panel('options').tab; // 相应的标签页(tab)对象
select | which | 选择一个标签页面板(tab panel),'which' 参数可以是标签页面板(tab panel)的标题(title)或索引(index)。 |
var datagrid = $("#dg"); var dgOptions = {rownumbers:true, fit:true, //当设置为 true 时,就设置标签页(Tabs)容器的尺寸以适应它的父容器。 border:false, //当设置为 true 时,就显示标签页(Tabs)容器边框。 rownumbers:true, url:'listData', //请求后台访问的路径 method:'post', toolbar:'#tb', pageSize: 20, pagination:true, multiSort:true, sortName: getInitParam().sort, sortOrder: getInitParam().order, queryParams: getInitParam(), <#if footerFieldList.size() gt 0>showFooter: true, </#if> columns: [[{field:'${head.id_field}', checkbox:true}<#list fieldList as item> <#if item.is_show_list == 1 && item.field_name != head.id_field> ,{field:'${item.field_name}', title: '${lumn_name}', width:${lumn_length}, sortable: true <#if item.input_type == 'easyui-filebox_img'>,formatter: function(value){return formatterDgImage(value)}</#if>}</#if> </#list> <#if lineList.size() gt 0>,{field:'operate', title: '操作', width: window.operateWidth || 120, formatter: function(value, row, index){var html = ""; <#list lineList as item> html += '<a class="operate" href="###" οnclick="btnClick${item.id}(' + index + ')">${item.btn_name}</a>';</#list> return html; } }</#if> ]],loadFilter: function(data) {if(sult && sult == 'fail') { //失败时,错误消息提示 showWarnMsg(data.msg); return {}; }else {return data; }} };
名称 | 类型 | 描述 | 默认值 |
---|---|---|---|
width | number | 标签页(Tabs)容器的宽度。 | auto |
height | number | 标签页(Tabs)容器的高度。 | auto |
plain | boolean | 当设置为 true 时,就不用背景容器图片来呈现 tab 条。 | false |
fit | boolean | 当设置为 true 时,就设置标签页(Tabs)容器的尺寸以适应它的父容器。 | false |
border | boolean | 当设置为 true 时,就显示标签页(Tabs)容器边框。 | true |
scrollIncrement | number | 每按一次 tab 滚动按钮,滚动的像素数。 | 100 |
scrollDuration | number | 每一个滚动动画应该持续的毫秒数。 | 400 |
tools | array,selector | 放置在头部的左侧或右侧的工具栏,可能的值: 1、数组,指示工具组,每个工具选项都和链接按钮(Linkbutton)一样。 2、选择器,指示包含工具的 <div>。 代码实例: 通过数组定义工具。 通过已有的 DOM 容器定义工具。
| null |
toolPosition | string | 工具栏位置。可能的值:'left'、'right'。该属性自版本 1.3.2 起可用。 | right |
tabPosition | string | 标签页(tab)位置。可能的值:'top'、'bottom'、'left'、'right'。该属性自版本 1.3.2 起可用。 | top |
headerWidth | number | 标签页(tab)头部宽度,只有当 tabPosition 设置为 'left' 或 'right' 时才有效。该属性自版本 1.3.2 起可用。 | 150 |
tabWidth | number | tab 条的宽度。该属性自版本 1.3.4 起可用。 | auto |
tabHeight | number | tab 条的高度。该属性自版本 1.3.4 起可用。 | 27 |
selected | number | 初始化选定的标签页索引。该属性自版本 1.3.5 起可用。 | 0 |
showHeader | boolean | 当设置为 true 时,显示标签页(tab)头部。该属性自版本 1.3.5 起可用。 | true |
listPage中的页面进入后会请求路径:listData调用后台数据。会传递一个headId。
返回的data数据。
本文发布于:2024-02-04 17:13:58,感谢您对本站的认可!
本文链接:https://www.4u4v.net/it/170712485657695.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
留言与评论(共有 0 条评论) |