前端表格的常用场景代码

最新推荐文章于 2024-06-17 00:04:45 发布
最新推荐文章于 2024-06-17 00:04:45 发布
阅读量1.9k 收藏
点赞数
分类专栏： 个人代码库 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z344310362/article/details/50876881
版权

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>'+'&nbsp&nbsp'+
                                '<a id="[id]" class="table_do_a btn_delete roleDelete" href="javascript:void(0)">删除</a>'+'&nbsp&nbsp'+
                                '<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();
    }

表格中有额外的内容(详情)需要异步加载

  1. 获取对象列表
    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>
kubeclub
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web前端-表格
weixin_44773989的博客
09-18 639
表格元素 <!--cellspacing:单元格之间距离，一般改为0 cellpadding:单元格内部边际 border：外边框的宽度 --> <body> <table border="5px" cellspacing="0" cellpadding="10px"> <tr> <th>序号</th> <th>姓名</th> <th>性别...
WEB前端H5 Vide常见场景浅析
Arui_0的博客
08-07 310
1.原生H5 video标签 <video id="mse" autoplay=true playsinline controls="controls"> <source src="实机视频地址" type="video/mp4"> 你的浏览器不支持Video标签 </video> 复制代码 2.第三方插件video.js _this.player = videojs( _this.videoNode, { autoplay:
前端页面常见场景实现
Handsome2013的博客
03-22 591
1.搜索结果高亮显示： 方式1：用高亮字段splite整段字符串，然后拼接的时候换做添加了样式的一段html，最后使用innerHtml放到页面上去。 方式2：使用正则表达式，将匹配正则的部分换做一段带有样式的html， changeColor (resultsList) { resultsList.map((item, index) => { // console.log('item', item) if (this.keyWords &
【前端:HTML+CSS+JavaScript】HTML基础（下）
加油，考上985的研究生
06-17 1251
标签用于定义描述列表（或定义列表），该标签与<dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用。<dl><dt>名词1</dt><dd>名词1解释1</dd><dd>名词1解释2</dd></dl><dl>
前端 表格
qq_43303896的博客
08-01 274
表格 <table>:用于定义表格，<table../>元素只能包含0个或者1个<caption.../>子元素（定义标题)。有下面几个属性： cellpadding：指定的是单元格于边框之间的距离。属性值可以是像素值，或者百分比。 cellspacing:指定的是单元格与单元格之间的间距。属性值可以是像素值，或者百分比。 width:指定宽长度，属性值...
前端表单编程
zxnth的博客
12-10 245
什么是表单元素 在HTML中表单元素指form标签，它的作用是把用户输入或者选择的信息提交给后台。 <form action="#" method="post" enctype="application/x-www-form-urlencoded"> </form> form标签的属性： action：表单提交地址 method：提交方式 enctype：数据传递的方式...
前端开发中一些常用技巧总结
09-22
CSS代码`p span{float:right}`可以使日期自动移动到右侧，此技巧适用于多种场景。 2. **Web标准与H1的使用**：根据Web标准，每个页面只应包含一个`<h1>`标签，作为页面的主要标题。这有助于搜索引擎优化（SEO）和...
JQuery实现表格中相同单元格合并示例代码
10-27
单元格合并是数据展示的一种形式，常见于需要突出显示表格中相同数据的场景。 #### 二、表格中相同单元格合并的HTML结构 在HTML中，表格结构由`<table>`标签构成，其中包含`<tr>`标签表示行（Row），`<td>`标签...
创意bootstrap列表布局代码
04-25
这个“创意bootstrap列表布局代码”是基于Bootstrap框架设计的一种创新的列表布局方式，旨在提供图标与文字相结合的列表展示，适用于新闻内容呈现、快捷导航等多种UI设计场景。 在Bootstrap中，列表布局通常通过类 ...
WEB前端开发常用英语单词和语句汇总
05-22
标题中的"WEB前端开发常用英语单词和语句汇总"指的是这份文档旨在提供给从事WEB前端开发的程序员，或者是正在学习前端技术的爱好者们，一个关于日常工作中经常遇到的英文单词及短语的快速参考。这部分内容对于能够...
一些前端面试题.pdf
最新发布
06-20
**使用场景：** 1. **`<article>`**: 用于表示文档、页面或者应用程序中的独立部分，这部分可以被独立分发或复用。例如，一篇博客文章、一个新闻报道或者论坛帖子。 2. **`<section>`**: 代表文档中的一个独立区域...
一个表单设计器前端代码
08-29
一个表单设计器前端代码只用来学习用。学习点：拖拉、页签等
HTML表格生成Excel文件代码(纯前端)
02-15
HTML表格生成Excel文件代码 纯前端 demo 可以做参考~~
js实现漂亮的table表格
07-27
利用js技术和css技术实现比较好看使用的table表格，方便用来制作前端页面表格，可供参考学习或直接使用。
前端UI框架表格强大
12-16
前端UI框架表格强大JQWIDGETS.主要用于HTML5上的使用哦。jquery2.03以上.
漂亮的表格css+html
03-20
一个很好的表格html代码，里面包含了大量的css表格类型，界面清晰、清爽、相当的漂亮！
前端-html（表格）
umika的博客
01-13 179
html表格
（前端）HTML之表格
weixin_65479202的博客
04-21 1623
在HTML中学习表格非常有必要，表格的使用比较常见也很广泛！！！
web前端-HTML-表格
jinchenpeng的博客
05-26 2017
例子： 再例如： 单元格的合并 表格的属性： 例如： 例如：去掉单元格之间的边距 表的行和列的属性： 例如： 单元格合并练习1: 单元格合并练习2：
HTML5前端大作业：当当图书网项目源码分享
5. **表格（Table）**：在某些场景下，如图书列表展示，可能会用到HTML的表格元素来组织数据。 6. **导航栏（Navbar）**：网页顶部的导航栏通常包含多个链接，实现页面间的跳转。可以使用CSS来设计其样式和交互效果...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值