前端表格的常用場景程式碼
阿新 • • 發佈：2019-02-01
ulynlist幾種場景程式碼
tableColumn->rownumbers(true,false)顯示序號
isFullRow(true)是否填充滿行數
前端分頁
function creditTable(url){
this.data = new Array();
this.url = url;
var $this = this;
this.init = function(){
$this.showData();//先展示出標題
if(url!=null){
//獲取列表 後端分頁
主要是將customData設定成null，設定url
function Table(url){
this.data = new Array(5);
this.url = url;
this.opts = null;
var $this = this;
this.init = function(){
$this.showData();//先展示出標題
$.showLoading();
}
//顯示資料
this.showData=function(){
$this.opts = {
basePath:basePath+"js/sslib/ulynlist",
tableTpl:"credit2",
tableColumn:{
title:'ulynlist',
keyColumn:"",
columns:[
{field:'user_name',overflowview:'normal',label:'登入使用者',className:"unSortable",width:"200px"},
{field:'dept_name',overflowview:'normal',label:'登入單位',className:"unSortable"},
{field:'login_time',overflowview:'normal',label:'登入時間',className:"unSortable"},
{field:'state',overflowview:'normal',label:'登入狀態',className:"unSortable",
tableTransFunc:function(value,item){
if(value=="1"){
return "成功";
}else if(value=="0"){
return "失敗";
};
}},
{field:'ip',overflowview:'normal',label:'登入ip',className:"unSortable"},
{field:'memo',overflowview:'ellipsis',label:'登入描述',className:"unSortable"},
],
rownumbers:true
},
afterTableRender:function(){
},
customData:null,
url:url,
extra:{linesPerPageEditable:true},
requestData:{linesPerPage:10},
pageBarId: 'creditInfoManagerBar',
pageBarTpl:"credit2",
isFullRow:true
};
$("#creditInfoManager").ulynlist($this.opts);
}
}java端對應的接收引數
String linesPerPage = request.getParameter("linesPerPage");
String currentPage = request.getParameter("currentPage");
String userId = getUserId(request);
JSONObject result = loginAuditService.getLoginLogList(userId,begin_time,end_time,state,Integer.parseInt(currentPage),Integer.parseInt(linesPerPage));
JSONObject rtnJsonObject = new JSONObject();
rtnJsonObject.put("status",true);
rtnJsonObject.put("msg","獲取資料成功");
JSONObject businessJsonObject = new JSONObject();
businessJsonObject.put("list",result.getJSONArray("data"));
businessJsonObject.put("currentPage",result.getString("current_page"));
businessJsonObject.put("totalNum",result.getString("total_num"));
businessJsonObject.put("linesPerPage",result.getString("row_num"));
rtnJsonObject.put("data",businessJsonObject);
response.setContentType("application/json");
printOut(response, rtnJsonObject);自定義模版表格的分頁
主要用到的外掛：ulynlistPagination
/**
* 獲取相關的動態表格
*/
function Dynamic(data,tableBarTpl,divId){
this.data = data;
this.filter_data = data;
this.tableTpl = "newTpl";
this.tableBarTpl = tableBarTpl;
this.divId = divId;
this.currentPage = 1;
this.linesPerPage = 5;
var $this = this;
var opts = {
pageBarPath:basePath + 'js/sslib/ulynlist/pagebar',//pagebar的根資料夾路徑
pageBarTpl: 'flat', //模版檔名
currentPage:$this.currentPage, //當前頁碼
linesPerPage:$this.linesPerPage, //每頁幾行
totalNum:$this.filter_data.length, //總記錄數
pageSpanNum:5, //輸出span的個數
afterPaginationRender: function (ulynlistPageBarObj,opts) {
showTable($this.currentPage,$this.linesPerPage);
}, //分頁條渲染載入完回撥方法
onPageClick:function(page){
opts.currentPage = page;
$this.currentPage = page;
$($this.tableBarTpl).ulynlistPagination(opts);
}
}
var showTable = function(currentPage,lingPerPage){
var rest = parseInt(currentPage) * parseInt(lingPerPage) - $this.data.length;
var restArray =null;
if(rest > 0 ){
restArray = new Array(rest);
}
var html = template($this.tableTpl, {"list":$this.filter_data.slice((currentPage-1)*lingPerPage,currentPage*lingPerPage),"restArray":restArray});
$($this.divId).html(html);
}
var init = function(data){
$this.currentPage = 1;
$this.linesPerPage = 5;
$this.filter_data = data;
opts.currentPage = $this.currentPage;
opts.linesPerPage = $this.linesPerPage;
opts.totalNum = data.length;
$this.totalPage = data.length/$this.linesPerPage;
$($this.tableBarTpl).ulynlistPagination(opts);
}
function registObjectEven(){
}
this.filter = function(title){
var include_key_list = [];
var array = $this.data;
if(!$.trim(title)){
include_key_list = array;
}else{
$.each(array,function(i,value){
if(value.title.indexOf(title) == -1){
}else{
include_key_list.push(value);
}
});
}
init(include_key_list);
showTable($this.currentPage,$this.linesPerPage);
}
showTable($this.currentPage,$this.linesPerPage);
$($this.tableBarTpl).ulynlistPagination(opts);
registObjectEven();
}
表格中有額外的內容(詳情)需要非同步載入
- 獲取物件列表
function getApplicationObject(schemeId,currentPage,start_date,end_date,dept,object_name){
if(!currentPage)currentPage = 1;
$.sslajax({
url:basePath+"alliance/get_scheme_object.do",
data:{"scheme_id":schemeId,"current_page":currentPage,"row_num":5,"start_date":start_date,"end_date":end_date,"dept":dept,"object_name":object_name},
success:function(data){
showApplicationObject(data,schemeId);
}
});
}2.載入額外的詳情
function showApplicationObject(data,schemeId){
$("#companyListPageBar").uPageBar({
tableId:'#uTable',
tableTpl:'#uTableTpl',
currentPage:data.current_page,
linesPerPage:5,
totalNum:data.total_num,
currentData:data.data,
ajax:function(dataItem){
var id = dataItem.record_id;
var objectId = dataItem.object_id;
var businessId = dataItem.business_id;
var data_set = dataItem.data_set;
return $.sslajax({
vid:"[object_id='"+objectId+"']",
url:basePath + "hall/credit_detail_info_records.do",
data:{"business_id":businessId,"id":id,"theme_id":schemeId,data_set:data_set,"objectId":objectId},
success:function(data){
$("[record_id='"+id+"']").html(data.detail);
}
});
},
onPageClick:function(page){
var json = {"dept":"","start_date":"","end_date":"","object_name":""};
var $dept = $("span.provide span[dept_name]");
if("0"!=$dept.length){
json.dept = $dept.attr("dept_name");
}
json.start_date=$("#start_date").val();
json.end_date=$("#end_date").val();
json.object_name=$("#searchInp").val();
getApplicationObject(schemeId,page,json.start_date,json.end_date,json.dept,json.object_name);
},
afterTableRender:function(opts,nowPageData){
setOpenShow();
},
});
function setOpenShow(){
$(".publicityCon .btnToggleShow").click(function(){
$(this).find("i").toggleClass("glyphicon-menu-up glyphicon-menu-down");
$(this).closest("li").toggleClass("showDD");
if($(this).find("span").text()=="收起"){
$(this).find("span").text("展開");
}else{
$(this).find("span").text("收起");
}
});
$("dt[_object_id]").click(function(){
var objectId = $(this).attr("_object_id");
//var data_set = $(this).attr("data_set");
var url = basePath + "creditPage/credit_query.do";
if(objectId != undefined && objectId !=null && objectId.length<15){
Request.openURL(url,{"object_id":objectId});
}else{
$(this).showTip("無關聯資料");
return;
}
});
}
}3.表格模版
<script id="uTableTpl" type="text/html">
{{each list as item index}}
<li>
<button type="button" class="btn btnToggleShow">
<i class="glyphicon glyphicon-menu-down"></i>
<span>展開</span>
</button>
<dl>
<dt _object_id="{{item.object_id}}">{{item.object_name}}</dt>
<dd record_id="{{item.record_id}}">
</dd>
</dl>
</li>
{{/each}}
</script>