基于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 相关文章推荐
如何在标题栏显示框架内页面的标题
Feb 03 Javascript
js判断客户端是iOS还是Android等移动终端的方法
Dec 11 Javascript
jquery改变tr背景色的示例代码
Dec 28 Javascript
jquery插件开发之实现google+圈子选择功能
Mar 10 Javascript
jQuery的context属性用法实例
Dec 27 Javascript
微信小程序 教程之小程序配置
Oct 17 Javascript
jquery 仿锚点跳转到页面指定位置的实例
Feb 14 Javascript
Bootstrap禁用响应式布局的实现方法
Mar 09 Javascript
基于Vue实现拖拽效果
Apr 27 Javascript
javascript json字符串到json对象转义问题
Jan 22 Javascript
基于ssm框架实现layui分页效果
Jul 27 Javascript
layui table单元格事件修改值的方法
Sep 24 Javascript
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 利用Mail_MimeDecode类提取邮件信息示例
2014/01/26 PHP
php面向对象中static静态属性和静态方法的调用
2015/02/08 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
网站上面有这种切换效果
2006/06/26 Javascript
基于jquery的超简单上下翻
2010/04/20 Javascript
javascript常见用法总结
2014/05/22 Javascript
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
jQuery下拉美化搜索表单效果代码分享
2015/08/25 Javascript
jQuery实现为控件添加水印文字效果(附源码)
2015/12/02 Javascript
轮播的简单实现方法
2016/07/28 Javascript
浅谈Angular中ngModel的$render
2016/10/24 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
2017/02/14 Javascript
详解Vue 实例中的生命周期钩子
2017/03/21 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
2017/12/12 Javascript
微信、QQ、微博、Safari中使用js唤起App
2018/01/24 Javascript
JS数组去重的6种方法完整实例
2018/12/08 Javascript
vue使用better-scroll实现滑动以及左右联动
2020/06/30 Javascript
使用python实现拉钩网上的FizzBuzzWhizz问题示例
2014/05/05 Python
python MySQLdb Windows下安装教程及问题解决方法
2015/05/09 Python
Python中字典与恒等运算符的用法分析
2019/08/22 Python
Python jieba库用法及实例解析
2019/11/04 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
python生成并处理uuid的实现方式
2020/03/03 Python
Python requests模块session代码实例
2020/04/14 Python
详解Python 循环嵌套
2020/07/09 Python
Overload和Override的区别
2012/09/02 面试题
小学教师寄语大全
2014/04/03 职场文书
住房租房协议书
2014/08/20 职场文书
故意伤害人身损害赔偿协议书
2014/11/19 职场文书
2015年高校辅导员工作总结
2015/04/20 职场文书
小学教学工作总结2015
2015/05/13 职场文书
联谊会开场白
2015/06/01 职场文书
农贸批发市场管理制度
2015/08/07 职场文书
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS