精华内容
下载资源
问答
  • 顶部搜索栏:按条件传参给后端请求,控制表格数据重载刷新 底部表格:接收后端返回JSON数据,对表格渲染显示 2、前端传参 前端采用Layui框架渲染,对页码和条数传参给后台做条件查询; 得到后端返回数据,对前端...

    1、显示效果

    界面主要由两部分完成
    顶部搜索栏:按条件传参给后端请求,控制表格数据重载刷新
    底部表格:接收后端返回JSON数据,对表格渲染显示
    在这里插入图片描述

    2、前端传参

    前端采用Layui框架渲染,对页码和条数传参给后台做条件查询;
    得到后端返回数据,对前端表格进行重载刷新

    顶部搜索栏HTML

    <div class="layui-col-md12 x-so">
        <input class="layui-input" autocomplete="off" placeholder="开始日" name="start" id="start">
        <input class="layui-input" autocomplete="off" placeholder="截止日" name="end" id="end">
        <input type="text" name="keyword" id="keyword" placeholder="搜索关键字" autocomplete="off" class="layui-input">
        <button class="layui-btn" id="serach" data-type="reload"><i class="layui-icon">&#xe615;</i></button>
    </div>
    

    表格渲染

    var table = layui.table;
    table.render({
        elem: '#allData'
        , id: 'allDataTable'
        , height: 400   //容器高度
        , url: '/query' //数据接口
        , method: 'post'
        , where: {
            name: 'test',
            startDate:'',
            endDate: '',
            keyword: ''} // 默认传参 limit,page
        , page: true    //开启分页
        , limits: [10, 50, 100, 500, 1000]  // 显示页数
        , cols: [[      //表头
            {field: 'host', title: 'Host', width: 130, sort: true, fixed: 'left'}
            , {field: 'address', title: '地址', width: 150, sort: true}
            , {field: 'user', title: '用户名', width: 85, sort: true}
            , {field: 'pw', title: '密码', width: 100, sort: true}
            , {field: 'new_user', title: '新增用户', width: 95, sort: true}
            , {field: 'new_pw', title: '新增密码', width: 95, sort: true}
            , {field: 'systemt', title: '系统配置', width: 95, sort: true}
            , {field: 'UpdateTime', title: '更新时间', width: 145, sort: true}
            , {field: 'mark', title: '备注', width: 70, sort: true}
            , {field: 'target', title: '来源', width: 80}
        ]]
    });
    

    表格重载

    var active = {
        reload: function () {
            var _startDate = $('#start').val();
            var _endDate = $('#end').val();
            var _keyword = $('#keyword').val();
    
            var index = layer.msg('查询中,请稍等...', {icon: 16, time: false, shade: 0});
            setTimeout(function () {
                table.reload('allDataTable', { // 重载表格
                    page: {curr: 1}, // 重新从第一页开始
                    where: {
                        startDate: _startDate,
                        endDate: _endDate,
                        keyword: _keyword
                    }
                });
                layer.close(index);
            }, 800);
        }
    };
    $('#serach').on('click', function () {
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
    

    3、后端接收请求

    设定POST请求方式,通过 request.form 接收前端参数
    路由共实现两个数据查询的功能(Filter)

    1、查询总数
    query(db.func.count(table.c.host)).scalar()
    2、查询条目明细
    dquery(table).filter(rule).limit(limit).offset((int(page) - 1))

    根据 Layui 官方默认的JSON数据样式,最终返回格式如下:
    { "code": 0,"msg": "","count": 1000,"data": [{}, {}]}

    完整代码:

    @app.route('/query', methods=['POST'])
    def query():
        form_dict = request.form
        name = form_dict['name']
        limit = form_dict['limit']
        page = form_dict['page']
        startDate = form_dict['startDate']
        endDate = form_dict['endDate']
        keyword = form_dict['keyword']
    
        data = {"code": 0, "msg": "Successful", }
        try:
            table = all_table[name]
            _count = db.session.query(db.func.count(table.c.host)).scalar()
            # result = db.session.query(table).all()
            # result = db.session.query(table).filter(table.c.address.like('%上海%')).limit(limit).offset((int(page) - 1))
    
            if keyword == '':
                if startDate == '' or endDate == '':
                    rule = table.c.host.like('%.%')
                    _count = db.session.query(db.func.count(table.c.host)).scalar()
                else:
                    rule = table.c.UpdateTime.between(startDate, endDate)
                    _count = db.session.query(db.func.count(table.c.host)).filter(rule).scalar()
            else:
                if startDate == '' or endDate == '':
                    rule = or_(table.c.host.like('%' + str(keyword) + '%'),
                               table.c.address.like('%' + str(keyword) + '%'),
                               table.c.user.like('%' + str(keyword) + '%'),
                               table.c.pw.like('%' + str(keyword) + '%'),
                               table.c.new_user.like('%' + str(keyword) + '%'),
                               table.c.new_pw.like('%' + str(keyword) + '%'),
                               table.c.target.like('%' + str(keyword) + '%'),
                               table.c.systemt.like('%' + str(keyword) + '%'),
                               table.c.mark.like('%' + str(keyword) + '%')
                               )
                    _count = db.session.query(db.func.count(table.c.host)).filter(rule).scalar()
                else:
                    rule = and_(
                        table.c.UpdateTime.between(startDate, endDate),
                        or_(table.c.host.like('%' + str(keyword) + '%'),
                            table.c.address.like('%' + str(keyword) + '%'),
                            table.c.user.like('%' + str(keyword) + '%'),
                            table.c.pw.like('%' + str(keyword) + '%'),
                            table.c.new_user.like('%' + str(keyword) + '%'),
                            table.c.new_pw.like('%' + str(keyword) + '%'),
                            table.c.target.like('%' + str(keyword) + '%'),
                            table.c.systemt.like('%' + str(keyword) + '%'),
                            table.c.mark.like('%' + str(keyword) + '%')
                            )
                    )
                    _count = db.session.query(db.func.count(table.c.host)).filter(rule).scalar()
    
            result = db.session.query(table).filter(rule).limit(limit).offset(int(page) - 1))
            data['count'] = _count
            data['data'] = [x._asdict() for x in result]
            # UpdateTime日期格式化输出
            for i in range(len(data['data'])):
                if data['data'][i]['UpdateTime']:
                    data['data'][i]['UpdateTime'] = data['data'][i]['UpdateTime'].strftime("%Y-%m-%d %H:%M:%S")
        except Exception as err:
            data['code'] = 1
            data['msg'] = 'Failed! {}'.format(err)
            
        return jsonify(data)
    

    Tip:
    Flask sqlalchemy 映射关联已存在表的两种方法
    Table 数据表格官方文档 - layui.table

    关于博主

    喜欢就点赞 or 赞赏。
    3.65元,一年365天继续分享创作!
    在这里插入图片描述

    展开全文
  • 1.通过多选框是否选中来控制表格对应的列是否显示, 默认选中全部显示,未选中隐藏,如下图 上代码 <template> <div class="function_list"> <Button icon="md-search"></Button> <...

    首先说需求
    1.通过多选框是否选中来控制表格对应的列是否显示,
    默认选中全部显示,未选中隐藏,如下图未选中时
    默认为选择的情况

    上代码

    	 <template>
    	   <div class="function_list">
              <Button icon="md-search"></Button>
              <Button icon="md-sync"></Button>
              <Button icon="ios-list-box"></Button>
              <Button icon="ios-apps">
                <!-- 下拉框多选 -->
                <Dropdown trigger="click" style="margin-left: 20px">
                  <Icon type="md-arrow-dropdown" />
                  <DropdownMenu slot="list">
                    <CheckboxGroup
                      @on-change="checkAllGroupChange($event,index)"
                      v-for="(item,index) of checkAllGroup"
                      :key="index"
                      v-model="checkAllGroup1"
                    >
                      <Checkbox :label="item"></Checkbox>
                    </CheckboxGroup>
                  </DropdownMenu>
                </Dropdown>
              </Button>
            </div>
             <!-- 展示数据表格 -->
            <Table :columns="columns" :data="data2"></Table>
          <template>
    

    js代码段

    <script>
    export default {
      data() {
        return {
          // v-model 绑定
          checkAllGroup1: [],
          //循环数组
          checkAllGroup: [
            "供应商编号",
            "名称",
            "地址",
            "联系人",
            "电话",
            "银行",
            "银行卡号",
            "状态",
            "备注",
            "操作",
          ],
          //表头 表头的key值对应要显示的数据
          columns: [
            {
              type: "selection",
              width: 60,
              align: "center",
            },
            {
              title: "供应商编号",
              key: "SupplieNumber",
              align: "center",
            },
            {
              title: "名称",
              key: "name",
              align: "center",
            },
            {
              title: "地址",
              key: "address",
              align: "center",
            },
            {
              title: "联系人",
              key: "contacts",
              align: "center",
            },
            {
              title: "电话",
              key: "Telephone",
              align: "center",
            },
            {
              title: "银行",
              key: "bank",
              align: "center",
            },
            {
              title: "银行卡号",
              key: "BankCardNumber",
              align: "center",
            },
            {
              title: "状态",
              key: "state",
              align: "center",
            },
            {
              title: "备注",
              key: "remarks",
              align: "center",
            },
            {
              title: "操作",
              key: "operation",
              align: "center",
            },
          ],
          //表格展示数据
          data2: [
            //假数据
            {
              SupplieNumber: "9527", //供应商编号
              name: "周星驰", //名称
              address: "香港特别行政区", //地址
              contacts: "吴孟达", //联系人
              Telephone: "18888888888", //电话
              bank: "渣打银行", //银行
              BankCardNumber: "405516466131467979", //银行卡号
              state: "正常", //状态
              remarks: "暂无备注", //备注
              operation: "操作", //操作
            },
            {
              SupplieNumber: "9999", //供应商编号
              name: "胡歌", //名称
              address: "香港特别行政区", //地址
              contacts: "吴孟达", //联系人
              Telephone: "18888888888", //电话
              bank: "渣打银行", //银行
              BankCardNumber: "405516466131467979", //银行卡号
              state: "正常", //状态
              remarks: "暂无备注", //备注
              operation: "操作", //操作
            },
          ],
        };
      },
      mounted() {
        //把循环的数组赋值给双向绑定的值就可达到默认选中的效果
        this.checkAllGroup1 = this.checkAllGroup;
      },
      methods: {
        //@on-change事件 更改时触发
        //@on-change事件要传多个值必须传$event
        //$event 为更改后的数据
        //index 为更改值的下标
        checkAllGroupChange($event, index) {
          console.log("$event", $event, "index", index);
          let data = $event;
          if (index == 0) {
            //判断是否有重复值,如果没有返回-1
            let whether = data.indexOf("供应商编号");
            if (whether == -1) {
              //过滤删除
              this.columns = this.columns.filter(
                (col) => col.key !== "SupplieNumber"
              );
            } else {
              this.columns.splice(1, 0, {
                title: "供应商编号",
                key: "SupplieNumber",
                align: "center",
              });
            }
          } else if (index == 1) {
            let whether = data.indexOf("名称");
            if (whether == -1) {
              this.columns = this.columns.filter((col) => col.key !== "name");
            } else {
              this.columns.splice(2, 0, {
                title: "名称",
                key: "name",
                align: "center",
              });
            }
          } else if (index == 2) {
            console.log("复制以下注释代码,更改indexOf('要判断的值')");
            //  let whether = data.indexOf("要判断的值");
            // if (whether == -1) {
            //   this.columns = this.columns.filter((col) => col.key !== "表头里对应的key值");
            // } else {
            //   this.columns.splice(2, 0, {
            //     title: "名称",
            //     key: "表头里对应的key值",
            //     align: "center",
            //   });
            // }
          }
        },
      },
    };
    </script>
    

    希望对有做类似功能的朋友有所帮助,谢谢!

    展开全文
  • 岗位关键控制点</th> </tr> </thead> <tbody> <tr> <td>希望小学项目</td> <td>西门子交换机</td> <td> ...
  • 使用MD5效验文件版本,删除不在版本控制内的资源,如有变动替换并下载新的资源。 以下热更均在启动界面完成,热更完毕之后再切换到登录界面。 代码热更: 替换lua脚本后,开启lua解释器。 表格数据热更: 热更...
  • grid

    2017-04-17 15:22:18
    `通过远程控制将新增数据存储到表格并展示 `dataSource.add();`放置json,向数组添加内容至尾部 编辑行:`editRow` 编辑并保存行 `grid.addRow();grid.saveChanges();`日期格式显示 年/月<div class="col-md-4">

    dataSource.data();读取表格中的数据
    dataSource.read();通过远程控制将新增数据存储到表格并展示
    dataSource.add();放置json,向数组添加内容至尾部
    编辑行:editRow
    编辑并保存行 grid.addRow();grid.saveChanges();

    日期格式显示 年/月

    <div class="col-md-4">
    <div class="form-group has-feedback">
    <label class="input-title" for="discountStart">
    按计薪月份
    </label>
    <input name="discountName" id="discountStart" class="form-control" maxlength="20">
    </div>
    </div>

    //日期显示格式
    $("#discountStart").kendoDatePicker({
    value: new Date(),
    depth: "year",
    start: "year",
    format: "yyyy/MM"
    });

    //表头
    toolbar: [
    { template: kendo.template($("#template").html()) }
    ]

    展开全文
  • 1. 表格(table)依旧使用<table><thead><tbody><tr><th><td>来表现表格。有如下的类来控制table的属性, table样式默认会占满父容器 <div class=col-md-8> <table class=table table-
  • json分页

    2018-11-13 14:36:04
    1、传回json的数据格式,写出表格表格后面调用下面两个方法 2、创建分页信息 &lt;!-- 分页文字信息 :拿到控制器处理请求时封装在pageInfo里面的分页信息--&gt; &lt;div class="col-md-6"...

    JSON分页
    1、传回json的数据格式,写出表格,表格后面调用下面两个方法
    2、创建分页信息

     <!-- 分页文字信息 :拿到控制器处理请求时封装在pageInfo里面的分页信息-->
                    	<div class="col-md-6" id="page_info_area1">
                   			 </div>
                   			 <!-- 分页码 -->
                   			 <div class="col-md-6" id="page_nav_area1">
                           		<!-- 
                             		   1.pageContext.request.contextPath表示当前项目路径,采用的是绝对路径表达方式。一般为http:localhost:8080/项目名 。
                              			  2.首页,末页的逻辑:pn=1访问第一次,pn=${pageInfo.pages}访问最后一页
                           		-->
                          		 <!-- 如果还有前页就访问当前页码-1的页面, -->
                          		 <!--遍历所有导航页码,如果遍历的页码页当前页码相等就高亮显示,如果相等就普通显示  -->
                           		<!-- 如果还有后页就访问当前页码+1的页面, -->
                   		 </div>
    

    3、方法一

    /**
    		创建分页信息墒情
    	*/
    	function build_pagination_info1(result){
    	$("#page_info_area1").empty();
    	//得到服务器返回的jason数据里的分页信息,然后拼接
    	var pageNum =当前页;
    	var pages =总页数;
    	var total = 总条数;
    	$("#page_info_area1").append("当前"+pageNum+"页,共"+pages+"页,总"+total+"条记录");
    	}
    

    4、方法二

    /**
    		创建分页导航条:
    		根据bootstrap文档里的分页说明,使用jquery创建元素。
    	*/
    	function build_pagination_nav1(result){
    	$("#page_nav_area1").empty();
    	//首页
    	var fristPageLi = $("<li></li>").append($("<a></a>").attr("href","#").append("首页"));
    	//前一页
    	var prePageLi = $("<li></li>").append($("<a></a>").attr("href","#").append($("<span></span>").append("&laquo;")));
        //如果没有前一页,就让按钮不能被点击,否则绑定点击事件,重新发送ajax请求,访问相应页面
        if(当前页 == 1){
            fristPageLi.addClass("disable");
            prePageLi.addClass("disable");
        }
        else{
            fristPageLi.click(function(){
            	表格方法(1);
            });
            prePageLi.click(function(){
            		表格方法(当前页 -1);
            });
        }
    	var ul = $("<ul></ul>").addClass("pagination").append(fristPageLi).append(prePageLi);
    	 var navigatepageNums=[];
    		for(var i=1;i<=总页数;i++){
    			navigatepageNums.push(i);
    		 }
    		$.each(navigatepageNums,function(index,element){
    	        var numLi = $("<li></li>").append($("<a></a>").attr("href","#").append(element));
    	            //如果遍历的页码等于当前页面,就高亮显示,然后添加点击事件,如果有点击,就重新发送ajax请求,访问当前页面(pn=element)
    	            if(result.page==element){
    	                numLi.addClass("active");
    	            }
    	            numLi.click(function(){
    	            	表格方法名(element);
    	            })
    	        ul.append(numLi);
    	    })
    	//下一页
    	var nextPageLi = $("<li></li>").append($("<a></a>").attr("href","#").append($("<span></span>").append("&raquo;")));
    	//末页
    	var lastPageLi = $("<li></li>").append($("<a></a>").attr("href","#").append("末页"));
        //如果没有后一页,就让按钮不能被点击,否则绑定点击事件,重新发送ajax请求,访问相应页面
        if(当前页 == 总页数){
            nextPageLi.addClass("disable");
            lastPageLi.addClass("disable");
        }
        else{
            nextPageLi.click(function(){
            	表格方法(当前页 +1);
            });
            lastPageLi.click(function(){
            	表格方法(总页数);
            });
        }
    	ul.append(nextPageLi).append(lastPageLi);
    	$("<nav></nav>").append(ul).appendTo("#page_nav_area1");
    	}
    	
    

    5、页码部分

     var navigatepageNums=[];
    		for(var i=1;i<=result.totalPages;i++){
    			navigatepageNums.push(i);
    		 }
    		$.each(navigatepageNums,function(index,element){
    	        var numLi = $("<li></li>").append($("<a></a>").attr("href","#").append(element));
    	            //如果遍历的页码等于当前页面,就高亮显示,然后添加点击事件,如果有点击,就重新发送ajax请求,访问当前页面(pn=element)
    	            if(result.page==element){
    	                numLi.addClass("active");
    	            }
    	            numLi.click(function(){
    	            	sqDate(element);
    	            })
    	        ul.append(numLi);
    	    })
    
    展开全文
  • 输入参数:查询表格名称、当前页码、每页显示最大记录数、分页栏步长 输出参数为Map集合,分别对应:总记录数、总页数、分页栏步长指数、起始页码、结束页码、上一页标识、下一页标识、当前页码 该代码不包括数据...
  • 组件开发

    2010-06-11 23:17:00
    WinForm组件开发:构造ImageButton控件 ...使用css 控制GridView显示出来的数据 表格细边框css C#MD5加密解密 我封装的ADO.NET对数据库操作经典类 一个用C#编写的自动读写配置文件的开源组件 ...
  • Bootstrap 整体架构

    2019-10-02 07:58:51
    通过col-md-offset-*来控制列偏移。 基础布局组件——Bootstrap提供了多种基础布局组件。如排版、代码、表格、按钮、表单等。 Jquery——Bootstrap所有的JavaScript插件都依赖于Jquery的。如果要使用这些JS插件,...
  • md5()\Order by Rand()2、控制单表数据量纯INT不超过1000W;含CHAR不超过500W合理分表不超载;USERID\DATE\AREA建议单库不超过300表。3、优化表字段配置1、表字段数少而精IO高效、全表遍历、表修复快、提高并发、...
  • 1350多个精品易语言模块提供下载

    热门讨论 2011-06-06 17:51:09
    光驱控制模块.ec 全局事件模块.ec 全 程API模块.ec 全面操作SQL Server 2000.ec 公农历转换.ec 公农历转换1.2.ec 公农历转换 1.ec 公农历转换35.ec 公农历转换_2.ec 公历转农历模块 1.0.ec 公历转换为农历.ec 六六...
  • 光驱控制模块.ec 全局事件模块.ec 全 程API模块.ec 全面操作SQL Server 2000.ec 公农历转换.ec 公农历转换1.2.ec 公农历转换 1.ec 公农历转换35.ec 公农历转换_2.ec 公历转农历模块 1.0.ec 公历转换为农历.ec 六六...
  • 1345个易语言模块

    2012-01-27 19:41:59
    光驱控制模块.ec 全局事件模块.ec 全 程API模块.ec 全面操作SQL Server 2000.ec 公农历转换.ec 公农历转换1.2.ec 公农历转换 1.ec 公农历转换35.ec 公农历转换_2.ec 公历转农历模块 1.0.ec 公历转换为农历.ec 六六...
  • 表格输入那里有惊艳的感觉。不过从我的需求来说,我想提几个功能上的建议,我也会努力的学习下代码,争取帮到点忙: - 一个开关:在即时渲染和源代码直接输入之间切换。因为有时候...
  • 2.表格全部用百分比,自动适应800*600、1024*768、1600*1200等分辨率 3.学生网页外观由student.css控制,老师网页外观由teacher.css控制 4.ASP代码最大化简洁,只保留完成功能所必须的部分,全部才几百K 5.支持...
  • SAP R/3 事务码速查手册SAP R/3 事务码速查手册目录 1 CA 交叉应用组件 11 ...19.8.2 BC-DWB-CUS-TME 表格维护编辑器 376 19.8.3 BC-DWB-CUS-HMT 维护层次结构节点 376 19.8.4 BC-DWB-DIC-AC 激活程序,...
  • 易语言模块大全

    2018-08-07 13:01:30
    MD5取数据摘要.EC MDB到超级列表框.ec mp3信息模块.ec NT系统服务.ec OCX控件高级注册.ec ODBC方式填充树型框.ec PGBEAPICopy.ec powerdll.ec ProcessInfo.ec ProgressBar.ec qp编解码.ec QQ登录.ec QQ...
  • 版本控制的系统中都少不了diff的功能,即展示一个文件内容的增加与删除。 GFM中可以显示的展示diff效果。使用绿色表示新增,红色表示删除。 语法 其语法与代码高亮类似,只是在三个反引号后面写diff, 并且其内容中...
  • 版本控制的系统中都少不了diff的功能,即展示一个文件内容的增加与删除。 GFM中可以显示的展示diff效果。使用绿色表示新增,红色表示删除。 语法 其语法与代码高亮类似,只是在三个反引号后面写diff, 并且其内容中...
  • MD5取数据摘要.EC MDB到超级列表框.ec mmqrOICQ.ec mp3信息模块.ec NT系统服务.ec OCX控件高级注册.ec ODBC方式填充树型框.ec ProcessInfo.ec ProgressBar.ec qp编解码.ec qq登录.ec QQ通讯协议模块.ec RAR压缩.ec ...
  • 易语言模块914个

    2018-03-12 20:00:21
    MD5取数据摘要.EC MDB到超级列表框.ec mmqrOICQ.ec mp3信息模块.ec NT系统服务.ec OCX控件高级注册.ec ODBC方式填充树型框.ec PGBEAPICopy.ec powerdll.ec ProcessInfo.ec ProgressBar.ec qp编解码.ec ...
  • redux(基础用法,但是封装了通用 action 和 reducer,demo 中主要用于权限控制(ps:目前可以用 16.x 的 context api 代替),可以简单了解下) antd(蚂蚁金服开源的 react ui 组件框架) axios(http 请求模块,可...
  • 易语言540个易模块

    2009-05-02 14:48:40
    控制面板 控制系统音量 酷按钮2.2模块 扩展按钮控件 L LED液晶控件模块(红色增强版) 拦截外部程序消息 立体空间矩型模块 连接编译器 列表框打印预览1.0 列表框增强操作模块 浏览文件夹 六十四卦相 M MD5...
  • RFC中文文档-txt

    2009-09-11 14:56:56
    RFC18 IMP-IMP和主机-主机控制联接 RFC19_可用来降低有限交换节点阻塞的两条协议性的建议 RFC20_用于网络交换的 ASCII 格式 RFC21 网络会议 RFC22 主机-主机控制信息格式 RFC23_多重传送的调节信息 RFC24 文档规范 ...

空空如也

空空如也

1 2 3 4 5 ... 7
收藏数 136
精华内容 54
关键字:

md控制表格