基于layui数据表格以及传数据的方式


Posted in Javascript onAugust 19, 2018

如下所示:

数据表格一:

<div style="margin:0px; background-color: white; margin:0 10px;">
    <blockquote class="layui-elem-quote">
    <div class="layui-btn-group demoTable">
      <button class="layui-btn" data-type="getCheckData">下载</button></div>
      <form class="layui-form" style="float:right;">
        <div class="layui-form-item" style="margin:0;">
          <label class="layui-form-label">名称</label>
          <div class="layui-input-inline">
            <input type="text" name="zname" placeholder="输入作业名称" autocomplete="off" class="layui-input">
          </div>
          <div class="layui-form-mid layui-word-aux" style="padding:0;">
            <button id="cha" lay-filter="search" class="layui-btn" lay-submit><i class="fa fa-search" aria-hidden="true"></i> 查询</button>
          </div>
        </div>
      </form>
    </blockquote>
  </div>
<table class="layui-table" lay-data="{url:'../task/selectTask.do', page:true, id:'test2'}">
 <thead>
  <tr>
   <th lay-data="{checkbox:true,fixed:true}"></th>
   <th lay-data="{field:'id', width:60, sort: true}">ID</th>
   <th lay-data="{field:'cid', width:150, sort: true}">课程id</th>
   <th lay-data="{field:'tid', width:150, sort: true}">教师id</th>
   <th lay-data="{field:'zname', width:150, sort: true}">作业名称</th>
   <th lay-data="{field:'ztime', width:150, sort: true,toolbar: '#timeTpl'}">提交时间</th>
   <th lay-data="{field:'zcontext', width:150, sort: true}">作业内容</th>
   <th lay-data="{field:'zremarks', width:150, sort: true}">备注</th>
   <th lay-data="{fixed: 'right', width:100, align:'center', toolbar: '#barDemo1'}"></th>
  </tr>
 </thead>
</table>

基于layui数据表格以及传数据的方式

数据传输方式

<script type="text/html" id="barDemo1">
 <a href="/?zname={{d.zname}}" rel="external nofollow" class="layui-btn layui-btn-mini" lay-event="edit">下载</a>
</script>

将参数绑定传入后台

jo.put("code", 0);
    jo.put("msg",":");
    jo.put("count", 1000);
    jo.put("data", list);

后台数据传入前台的方式

数据表格二:

<div class="admin-main">

      <blockquote class="layui-elem-quote">
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" class="layui-btn layui-btn-small" id="add">
          <i class="layui-icon"></i> 添加信息
        </a>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="layui-btn layui-btn-small" id="import">
          <i class="layui-icon"></i> 导入信息
        </a>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="layui-btn layui-btn-small">
          <i class="fa fa-shopping-cart" aria-hidden="true"></i> 导出信息
        </a>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="layui-btn layui-btn-small" id="getSelected">
          <i class="fa fa-shopping-cart" aria-hidden="true"></i> 获取全选信息
        </a>
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" class="layui-btn layui-btn-small" id="search">
          <i class="layui-icon"></i> 搜索
        </a>
      </blockquote>
      <fieldset class="layui-elem-field">
        <legend>数据列表</legend>
        <div class="layui-field-box layui-form">
          <table class="layui-table admin-table">
            <thead>
              <tr>
                <th style="width: 30px;"><input type="checkbox" lay-filter="allselector" lay-skin="primary"></th>
                <th>编号</th>
                <th>用户名</th>
                <th>真实姓名</th>
                <th>性别</th>
                <th>电话</th>
                <th>邮箱</th>
                <th>公司</th>
                <th>职位</th>
                <th>政治面貌</th>
                <th>培训状态</th>
                <th>账号状态</th>
                <th>角色</th>
                <th>创建时间</th>
                <th>备注</th>
            
              </tr>
            </thead>
            <tbody id="content">
            </tbody>
          </table>
        </div>
      </fieldset>
      <div class="admin-table-page">
        <div id="paged" class="page">
        </div>
      </div>
    </div>

基于layui数据表格以及传数据的方式

以上这篇基于layui数据表格以及传数据的方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript高级程序设计 DOM学习笔记
Sep 10 Javascript
一些老手都不一定知道的JavaScript技巧
May 06 Javascript
JavaScript中的console.log()函数详细介绍
Dec 29 Javascript
js获取checkbox值的方法
Jan 28 Javascript
JavaScript函数作用域链分析
Feb 13 Javascript
利用Bootstrap实现表格复选框checkbox全选
Dec 21 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
Mar 03 Javascript
JavaScript常用数学函数用法示例
May 14 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
May 16 Javascript
js实现简单分页导航栏效果
Jun 28 Javascript
layui-select动态选中值的例子
Sep 23 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
LayUi中接口传数据成功,表格不显示数据的解决方法
Aug 19 #Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
Aug 19 #Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
Aug 19 #Javascript
layui框架table 数据表格的方法级渲染详解
Aug 19 #Javascript
详解微信小程序input标签正则初体验
Aug 18 #Javascript
vue实现键盘输入支付密码功能
Aug 18 #Javascript
记录一篇关于redux-saga的基本使用过程
Aug 18 #Javascript
You might like
PHP 变量定义和变量替换的方法
2009/07/30 PHP
PHP 面向对象 PHP5 中的常量
2010/05/05 PHP
php正则表达式验证(邮件地址、Url地址、电话号码、邮政编码)
2016/03/14 PHP
popdiv
2006/07/14 Javascript
JQuery 图片的展开和伸缩实例讲解
2013/04/18 Javascript
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
我的Node.js学习之路(二)NPM模块管理
2014/07/06 Javascript
js实现屏幕自适应局部代码分享
2015/01/30 Javascript
JavaScript基础函数整理汇总
2015/01/30 Javascript
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
浅析js绑定事件的常用方法
2016/05/15 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
2016/06/13 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
2017/04/04 jQuery
微信小程序实现倒计时调用相机自动拍照功能
2018/06/10 Javascript
vue如何进行动画的封装
2018/09/26 Javascript
js实现弹出框的拖拽效果实例代码详解
2019/04/16 Javascript
Layui 动态禁止select下拉的例子
2019/09/03 Javascript
Node绑定全局TraceID的实现方法
2019/11/14 Javascript
微信小程序实现滑动操作代码
2020/04/23 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
2020/08/08 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
[29:16]完美世界DOTA2联赛决赛日 Inki vs LBZS 第三场 11.08
2020/11/10 DOTA
[01:02:45]完美世界DOTA2联赛 LBZS vs Forest 第三场 11.07
2020/11/09 DOTA
Python中endswith()函数的基本使用
2015/04/07 Python
Python3.7 dataclass使用指南小结
2019/02/22 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
利用纯CSS3实现tab选项卡切换示例代码
2016/09/21 HTML / CSS
公务员试用期满考核材料
2014/05/22 职场文书
就业协议书
2014/09/12 职场文书
2014年第四季度入党积极分子思想汇报(十八届四中全会)
2014/11/03 职场文书
2015年招生工作总结
2015/05/04 职场文书
卫生院义诊活动总结
2015/05/07 职场文书
市级三好生竞选稿
2015/11/21 职场文书
反邪教学习心得体会
2016/01/15 职场文书
Python绘画好看的星空图
2022/03/17 Python
JavaScript实现外溢动态爱心的效果的示例代码
2022/03/21 Javascript