layui数据表格以及传数据方式
数据表格一:
<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>

数据传输方式
<script type="text/html" id="barDemo1">
<a href="/?zname={{d.zname}}" 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:;" class="layui-btn layui-btn-small" id="add">
<i class="layui-icon"></i> 添加信息
</a>
<a href="#" class="layui-btn layui-btn-small" id="import">
<i class="layui-icon"></i> 导入信息
</a>
<a href="#" class="layui-btn layui-btn-small">
<i class="fa fa-shopping-cart" aria-hidden="true"></i> 导出信息
</a>
<a href="#" class="layui-btn layui-btn-small" id="getSelected">
<i class="fa fa-shopping-cart" aria-hidden="true"></i> 获取全选信息
</a>
<a href="javascript:;" 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数据表格的接口数据请求方式为Get
Layui数据表格的接口数据请求方式为Get
- 关于easyui-datagrid数据表格, 分页取出数据
在制作数据表格的时候有一个这样的属性, pagination是否显示分页列表, 分页显示的时候需要分别从数据库中取数据, 每页显示几行, 即只从数据库取出几行数据来显示, 具体代码如下 1, 显示页面 ...
- layui更新表格单元格数据口,更新单元格的内容
//监听工具条 table.on('tool(edit)', function(obj){ var data = obj.data; if(obj.event === 'getinvitation') ...
- LayUI之table数据表格获取行、行高亮等相关操作
前言 目前LayUI数据表格既美观有不乏一些实用功能.基本上表格应有的操作已经具备,LayUI作者[贤心]肯定是煞费苦心去优化,此处致敬.但是实话实话,如果单纯那数据表格功能来说,EasUI的数据表格 ...
- LayUI——数据表格使用
Layui数据表格的实际项目使用 Layui的数据表格可谓是在后台管理的页面中经常用到的工具了 最近做项目就用到了,项目的要求是用数据表格显示出后台文章的列表并且每一行的文章都有对应的修改删除操作按钮 ...
- 第二百二十四节,jQuery EasyUI,ComboGrid(数据表格下拉框)组件
jQuery EasyUI,ComboGrid(数据表格下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 ComboGrid(数据表格下拉框)组件的 ...
- fsLayuiPlugin树+数据表格使用
fsLayuiPlugin 是一个基于layui的快速开发插件,支持数据表格增删改查操作,提供通用的组件,通过配置html实现数据请求,减少前端js重复开发的工作. GitHub下载 码云下载 测试环 ...
- Layui table 组件的使用:初始化加载数据、数据刷新表格、传参数
背景 笔者之前一直使用 bootstrap table ,因为当前项目中主要使用 Layui 框架,于是也就随了 Layui table ,只是在使用的时候出现了一些问题,当然也是怪自己不熟悉的锅吧! ...
- Layui上传文件以及数据表格
layui对于一些前端小白来说,例如我,真的非常的好用,不用去花很多很多的心思在前端美化中,并且提高了很大的工作效率.所以建议一些觉得自己前端技术不是很强,但是想让前端美化一点的可以使用layui. ...
随机推荐
- Block使用的简单总结
一.Block简单的使用 1.block当作参数来传递 如下定义一个没有返回值无参数的block,并把它作为参数,让系统调用,注意:这里是系统在调用,不是我们调用 那么为什么需要把block当作参数去 ...
- python识别验证码——一般的数字加字母验证码识别
1.验证码的识别是有针对性的,不同的系统.应用的验证码区别有大有小,只要处理好图片,利用好pytesseract,一般的验证码都可以识别 2.我在识别验证码的路上走了很多弯路,重点应该放在怎么把图片处 ...
- WPF 学习笔记 路由事件
1. 可传递的消息: WPF的UI是由布局组建和控件构成的树形结构,当这棵树上的某个节点激发出某个事件时,程序员可以选择以传统的直接事件模式让响应者来响应之,也可以让这个事件在UI组件树沿着一定的方向 ...
- This application failed to start because it could not find or load the Qt platform plugin "windows" 的问题原因以及解决方案
1. 问题原因非常简单,经过各种百度,都没有找到解决方案,在此做一个记录备用. 2.原因就在于,项目目录使用了中文路径,然后出现了这个问题. 3.我是在使用 syncfusion 下的HTML 转PD ...
- mysql登录出现1045错误修改方法
在cmd中输入mysql -uroot -p出现1045错误如下: ERROR 1045(28000): Access denied for user 'root'@'localhost'(using ...
- Thrift总结(三)Thrift框架
1.数据类型 基本类型: bool:布尔值,true 或 false,对应 Java 的 boolean byte:8 位有符号整数,对应 Java 的 byte i16:16 位有符号整数,对应 J ...
- 笨鸟先飞之ASP.NET MVC系列之过滤器(05结果过滤器)
概念介绍 结果过滤器看名字就知道这个过滤器是针对方法所产生结果的,结果过滤器,主要在我们的动作方法结果返回前后执行. 如果我们需要创建结果过滤器需要实现IResultFilter接口. namespa ...
- OpenSCAD 建模:矿泉水瓶花洒
下载地址:https://github.com/ZhangGaoxing/openscad-models/tree/master/Sprinkle 代码: module screw(r=){ ::]) ...
- win10 uwp 截图 获取屏幕显示界面保存图片
本文主要讲如何保存我们的屏幕显示的,保存为图片,也就是截图,截我们应用显示的. UWP有一个功能,可以截图,RenderTargetBitmap 我们首先写一个Grid,我们需要给他名字,我这里给他S ...
- Ubuntu14.04LTS下安装Node.js&NPM以及个人博客hexo的初始化配置
什么是hexo Hexo 是一款基于node 的静态博客网站生成器作者 :tommy351是一个台湾的在校大学生...相比其他的静态网页生成器而言有着,生成静态网页最快,插件丰富(已经移植了大量Oct ...