前端表格的常用场景代码

最新推荐文章于 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前端基础day02】表格table+表单form
qq_61971608的博客
01-16 3851
HTML over
web前端开发零基础入门6（关于HTML表格）
qq_62512326的博客
07-07 1769
table 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th或 td元素组成表格结构；其中： tr>元素定义表格行，th 元素定义表头，td 元素定义表格单元。 为了让表格更美观，我们会用到：border，colspan，rowspan，align，bgcolor 等来美化表格。之前我们说过在VS里面使用的标签，比如什么meta标签啊。 在下面这个链接里面有我详细说明的：表格边框：在使用table border=“1” /table 的方式来定义，其中：数字表
Web前端之表格
花&败
10-29 5764
同样在网页中我们也需要使用表格，我们通过table标签来创建一个表格在table中使用tr表示表格中的一行，有几个tr就有几行在tr中使用td表示一个单元格，有几个td就有几个单元格rowspancolspan。
19-CMS前端页面查询开发-页面原型-Table组件测试
minihuabei的博客
01-21 155
Element-UI介绍 本项目使用Element-UI来构建界面，Element是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组 件库。 Element-UI官方站点：http://element.eleme.io/#/zh-CN/component/installation Table组件测试 本功能实现的页面列表，用户可以进行分页查询、输入查询条件查询，通过查看Element-UI库，我们需要Table 表 格、Form表单 及Pagination 分页组件。 进入Element
【前端:HTML+CSS+JavaScript】HTML基础（下）
加油，考上985的研究生
06-17 1256
标签用于定义描述列表（或定义列表），该标签与<dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用。<dl><dt>名词1</dt><dd>名词1解释1</dd><dd>名词1解释2</dd></dl><dl>
web前端开发与应用——表格
m0_59742894的博客
11-29 2116
表格的基本标签 HTML表格由table标签以及一个或多个tr、th或td标签组成： table标签：定义一个表格 caption标签：定义表格标题，嵌套在<table></table>中 tr标签：定义表格中的一行，嵌套在<table></table>中 th标签：定义表格中的表头单元格，嵌套在<tr></tr>中 td标签：定义表格中的数据单元格，嵌套在<tr></tr>中 表格标签的基本属性
前端开发中一些常用技巧总结
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>`**: 代表文档中的一个独立区域...
js前端，一个漂亮的自写表格table
hwlll的博客
05-10 2872
将th的 position设置为sticky，固定首行，也就是top=0，为其设置为一个区分的颜色。由于上面的滚动效果不好，看起来很卡顿，下面优化了滚动效果，加入缓动。然后利用timer定时器和scrollTop 属性设置滚动效果，table里的数据在data里返回，以下是实例数据。这样我们就拥有了一个没有样式的基础表格。
前端基础---表格table、表单form
xyue_的博客
04-22 1011
前端—table表格、form表单 一、表格table 1.标签 （1）table 表格 （2）tr 表格行 （3）th 表头 （4）td 单元 2、css reset （1）table{border-collapse;} 单元格间隙合并 （2）th,td{padding:0;} 重置单元格默认填充 3、单元格合并 （1）colspan 横向合并 （2）rowspan 纵向合并 口诀： 一找（想要合并的第一个单元格） 二合（合并单元格） 三删除（将多余的单元格删除
（前端）HTML之表格
weixin_65479202的博客
04-21 1626
在HTML中学习表格非常有必要，表格的使用比较常见也很广泛！！！
前端基础之表格（看这里就够了）
小古月成的博客
08-05 2014
代码 <!DOCTYPE html> <html> <head> <title>前端基础之表格table</title> <meta charset="UTF-8"> <style> .table{ margin: 10px auto; border...
前端-html（表格）
umika的博客
01-13 180
html表格
[前端笔记——HTML 表格] 8.HTML 表格
weixin_44963137的博客
01-20 1813
HTML表格介绍
HTML笔记（二）
qwq_666的博客
12-18 417
表单 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表单form</title> </head> <body> <!-- 1.表单有什么用？ 收集用户信息。表单展现之后，用户填写表单，点击提交按钮提交数据给服务器 2.如何画表单 使用form标签画表单 3.一个网页当中可以有多个表单
前端基础、HTML表格列表表单标签、表单控件、使用场景及代码
atatsuki的博客
04-29 858
(定义项目/名字)和(描述每一个项目/名字)一起使用名词1名词1解释1名词1解释2
HTML5前端大作业：当当图书网项目源码分享
5. **表格（Table）**：在某些场景下，如图书列表展示，可能会用到HTML的表格元素来组织数据。 6. **导航栏（Navbar）**：网页顶部的导航栏通常包含多个链接，实现页面间的跳转。可以使用CSS来设计其样式和交互效果...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值