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">${item.column_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:'${item.dict.get(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">${item.column_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">${item.column_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: '${item.column_name}', width:${item.column_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(data.result && data.result == '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!''}"; param.order = "${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) {
if(data.result && data.result == '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 = "";
param.order = "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 = document.createElement("script");
hm.src = "//hm.baidu.com/hm.js?96bb51056dd3bece3de02a351f072069";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</body>
</html>
EasyUI中的tabs.
依赖
- panel
- linkbutton
用法
创建标签页（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）
通过迷你工具添加一个新的标签页面板（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）
// 获取选中的标签页面板（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: '${item.column_name}', width:${item.column_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(data.result && data.result == 'fail') { //失败时，错误消息提示 showWarnMsg(data.msg); return {}; }else { return data; } } };
属性
listPage中的页面进入后会请求路径：listData调用后台数据。会传递一个headId。
返回的data数据。
扫一扫
1893
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
