前端表格的常用场景代码
来源：互联网 发布：qq在线客服js代码 编辑：程序博客网 时间：2024/05/16 14:29
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){ //获取列表 userAjax = $.sscajax({ type: "POST", url: this.url, dataType: "json", success: function(data){ $this.data = data; $this.showData(); }, error:function(result){ } }); } }; //显示数据 this.showData=function(){ var opts = { basePath:basePath+"js/sslib/ulynlist", tableTpl:"credit2", tableColumn:{ title:'ulynlist', keyColumn:"", columns:[ {field:'title',overflowview:'ellipsis',label:'信用公告标题',className:"unSortable",width:"200px"}, {field:'publish_user',overflowview:'normal',label:'发布用户',className:"unSortable"}, {field:'create_time',overflowview:'normal',label:'发布时间',className:"unSortable"}, {field:'',overflowview:'normal',label:'操作',className:'unSortable Operation',width:140, bodyContent:'<a id="[id]" class="table_do_a btn_edit" href="javascript:void(0)">编辑</a>'+'  '+ '<a id="[id]" class="table_do_a btn_delete roleDelete" href="javascript:void(0)">删除</a>'+'  '+ '<a id="[id]" class="table_do_a btn_detail roleDelete" href="javascript:void(0)">详情</a>' } ], rownumbers:false }, afterTableRender:function(){ }, customData:$this.data, extra:{linesPerPageEditable:true}, requestData:{linesPerPage:10}, pageBarId: 'creditInfoManagerBar', pageBarTpl:"credit2" }; $("#creditInfoManager").ulynlist(opts); }; }后端分页
主要是将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> 0 0
- 前端表格的常用场景代码
- 在前端使用JSON两种常用场景的分析
- 常用前端代码归纳
- web前端常用代码
- 移动前端常用代码
- 前端常用代码
- 前端之常用代码
- CSS实践：常用场景代码
- 有关表格的前端页面
- web前端常用代码集合
- 前端开发中最常用的JS代码片段
- 一些前端开发中最常用的JS代码片段
- SSH框架下，使用FormData对象提交表格的内容（前端+后台代码）
- Java表格的代码
- 前端表格
- 常用的设计模式场景
- git 常用场景的命令
- 常用数据结构的应用场景
- Memcache---集群方案
- Linux 设备驱动开发 —— Tasklets 机制浅析
- linux常用命令
- 第三周项目1：个人所得税计算器
- 欢迎使用CSDN-markdown编辑器
- 前端表格的常用场景代码
- C - Connect them (The 6th Zhejiang Provincial Collegiate Programming Contest ）
- HDOJ-1233 还是畅通工程(最小生成树)
- 大学毕业4年-未来展望-序
- GDB调试的几个实用命令
- 第一个小应用：图片浏览器 之 三 学会使用内部存储
- [LeetCode]74. Search a 2D Matrix
- django中的分页
- 博客互推联盟上线了
