由ligerUI到amazeUI+dataTable插件

最新推荐文章于 2018-05-08 17:24:00 发布

numlockabc272

最新推荐文章于 2018-05-08 17:24:00 发布

阅读量2.6k

点赞数

分类专栏： java 文章标签： ligerUI amazeUI ligerGrid dataTable freemarker

本文链接：https://blog.csdn.net/numlockabc272/article/details/49637091

版权

java 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

进入公司以来一直用的ligerUI现在不用了，好吧！又像进来的时候学习ligerUI的时候一样学习了一下dataTable+妹子

先上ligerUI的ligerGrid显示页面数据

<@home.head>
<@home.list/>//freemarker宏文件封装了的list
<script>
$(function (){
//定义页面布局
MainLayout = $("#MainLayout").ligerLayout({
height:parent.FrameLayout.center.height(),
topHeight:40,
allowTopResize:false,
InWindow:false,
heightDiff :-29
});

var EditAuthValue = GetAuthValue("/ads/manage/template/edit");

var DeleteAuthValue = GetAuthValue("/ads/manage/template/delete");

MainGrid = $("#MainGrid").ligerGrid({
height:MainLayout.center.height(),
headerRowHeight:20,
heightDiff:0,
width:"100%",
url:'/ads/manage/template/list',
selectRowButtonOnly:true,
formId:'searchForm',
columns: [
{ display: '主键 ', name:'templateId',isAllowHide:false,hide:true},
{ display: '操作', isAllowHide:false,width: 60,minWidth:60,render: function (row)
{
var html = "";
if(DeleteAuthValue==1){
html += "<span title='删除' class='l-icon-delete grid-line-btn' οnclick=\"deleteObjFromMainGrid('"+row.templateId+"','"+row.__id+"')\"> </span>";
}
if(EditAuthValue==1){
html += "  <span title='编辑' class='l-icon-edit grid-line-btn' οnclick=\"edit('"+row.templateId+"','"+row.__id+"')\"> </span>";
}
return html;
}
},
{ display: '模板名称', name:'templateName'},
{ display: '广告模式', name:'templateType',render:function(row){
return top.DictJson['ADS_TEMPLATE_TYPE'][row.templateType];
}},
{ display: '轮播间隔时间(秒)', name:'adsInterval'},
{ display: '创建人', name:'fcu'},
{ display: '创建时间', name:'fcd',type:'date',format:'yyyy-MM-dd hh:mm:ss'},
{ display: '状态', name:'state',width: 60,minWidth:60,
render: function (row)
{
if(row.state == '1'){
return "<span style='color:#009900;font-weight:bold;'>"+top.SelectStateByKey('COMMON',row.state)+"</span>";
}else{
return "<span style='color:#FF0000;font-weight:bold;'>"+top.SelectStateByKey('COMMON',row.state)+"</span>";
}

}
}
],
toolbar: { items: [
{ text: '新增广告模板', click: addNewRecord, icon: 'add',auth:"/ads/manage/template/add"}
]
}
});
});

var addNewRecord = function(){
showDialogIncludeButton('/ads/manage/template/add','添加广告模板',680,450);
};
var edit = function(templateId){
showDialogIncludeButton('/ads/manage/template/edit?templateId='+templateId,'修改广告模板',680,450);
};

</script>
</@home.head>

<@home.body>

<div id="MainLayout" keyname="templateId">
<div position="top" title="" style="padding-top:5px;padding-left:10px;">

<div>
<form id="searchForm" name="searchForm" class="l-form" action="/adsTemplate/add">
<table id="searchTable" class="searchTable">
<tr>
<th>
广告模式：
</th>
<td>
<@jzs.select dictKey="ADS_TEMPLATE_TYPE" name="templateType" id="templateType"/>
</td>
<th>
广告模板名称：
</th>
<td>
<input type="text" name="adsTemplateName" id="adsTemplateName"/>
</td>
<th>
<div class="liger-button" data-click="SubmitQuery" data-width="60" icon="search">查询</div>
</th>
</tr>
</table>
</form>
</div>
</div>
<div position="center" title="">

<div id="MainGrid"></div>
</div>
</div>
</@home.body>

再上妹子+dataTable显示数据页面

<@home.head>
<@home.list/>
<script type="text/javascript">
$(function(){
initDataGird({
"target": "mainGird",//表格ID
"bInfo" : true, //是否显示左下角页脚信息
"sAjaxSource": getBaseUrl()+"/list?id=" + new Date().getTime(),//数据查询地址
"fnServerParams": function(aoData){ //查询条件
aoData.push(
{"name":"templateType", "value":$("#templateType").val()},
{"name":"adsTemplateName", "value":$("#adsTemplateName").val()}
);
},
"aoColumns": [ //表格列定义
{ "mData": "templateId" },
{ "mData": "templateName" },
{ "mData": "templateType" },
{ "mData": "adsInterval" },
{ "mData": "state" },
{ "mData": "templateDesc" },
{ "mData": "fcu" },
{ "mData": "fcd" }
],
"columnDefs" : [
{
"targets" : 0,
"render" : function(data, type, row) {
var optHtml = "<div class='am-btn-toolbar ads-table-opt'>"
+"<div class='am-btn-group am-btn-group-xs'>"
+"<button class='am-btn am-btn-white am-btn-xs am-text-primary' οnclick='_edit(\""+data+"\");'><span class='am-icon-pencil-square-o'> </span>编辑</button>"
+"<button class='am-btn am-btn-white am-btn-xs am-text-danger' οnclick='_delete(\""+data+"\");'><span class='am-icon-trash-o'> </span>删除</button>"
+"</div>"
+"</div>";
return optHtml;
}
},
{
"targets" : 2,
"render" : function(data, type, row) {
return dictMap['ADS_TEMPLATE_TYPE'][data];
}
},
{
"targets" : 4,
"render" : function(data, type, row) {
return (data=='1') ? '<span class="am-text-success">启用</span>':'<span class="am-text-danger">禁用</span>';
}
},
{
"targets" : 7,
"render" : function(data, type, row) {
return long2DateStr(data);
}
}
]
});
});

</script>

</@home.head>
<@home.body>

<div class="ads-top-nav">
<div class="am-cf am-padding">
<div class="am-fl am-cf">
<span class="am-icon-list"> </span>
广告机管理  »  
<strong class="am-text-primary">我的模板</strong>
</div>
</div>
</div>


<form class="am-form" id="searchForm" οnsubmit="return false">
<div class="am-cf am-padding ads-search-form">
<div class="am-g">

<div class="am-u-sm-12 am-u-md-6">
<div class="am-btn-toolbar">
<div class="am-btn-group am-btn-group-sm">
<button type="button" class="am-btn am-btn-warning" οnclick="_add();"><span class="am-icon-plus"> </span>新建模板</button>
</div>
</div>
</div>

<div class="am-u-sm-12 am-u-md-3">
<div class="am-input-group am-input-group-sm">
<@jzs.select dictKey="ADS_TEMPLATE_TYPE" name="templateType" id="templateType" />
</div>
</div>
<div class="am-u-sm-12 am-u-md-3">
<div class="am-input-group am-input-group-sm">
<input type="text" name="adsTemplateName" id="adsTemplateName" class="am-form-field" placeholder="模板名称">
<span class="am-input-group-btn">
<button class="am-btn am-btn-warning" type="button" οnclick="_query();"><span class="am-icon-search"></span></button>
</span>
</div>
</div>

</div >
</div>
</form>

<table id="mainGird" keyname="templateId" width="100%" cellspacing="0" class="am-table am-text-nowrap am-table-striped am-table-hover">
<thead>
<tr>
<th>操作</th>
<th>模板名称</th>
<th>广告模式</th>
<th>轮播间隔时间(秒)</th>
<th>启用状态</th>
<th>模板描述</th>
<th>创建人</th>
<th>创建时间</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script type="text/javascript">
$(function() {
$('#templateType').chosen();
});
</script>
</@home.body>