layui 数据表格

返回格式:

var json = new
{
code = 0,
count = pagers.totalRows,
msg = "",
data =null

};

请求格式:

table.render({
elem: '#SysSampleIndexTable'
, url: '/SysSample/GetList'
, method: "post"
//, cellMinWidth: 55 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
, cols: [[
{ type: 'checkbox' }
, { field: 'id', title: 'ID', sort: true, hide: true }
, { field: 'Name', title: '用户名' }
, { field: 'Age', title: '年龄', sort: true }
, { field: 'Bir', title: '生日', hide: true }
, { field: 'Note', title: '简介' } //minWidth:局部定义当前单元格的最小宽度,layui 2.2.1 新增
, { field: 'Photo', title: '图片', sort: true, hide: true }
, { field: 'CreateTime', title: '创建时间' }
, { fixed: 'right', title: '操作', toolbar: '#barDemo', minWidth: 160 }
]]
, page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
//,curr: 5 //设定初始在第 5 页
, groups: 3 //只显示 1 个连续页码
, first: '首页' //不显示首页
, last: '尾页' //不显示尾页

}
, limit: 6
, limits: [6, 10, 20, 30, 50, 100]
, where: {//条件
id: queryStr
//,sort:'CreateTime'//排序字段
}
//, request: {//请求参数
// pageName: 'page' //页码的参数名称,默认:page
// , limitName: 'limit' //每页数据量的参数名,默认:limit
//}
//, response: {//返回参数
//statusName: 'status' //规定数据状态的字段名称,默认:code
//, statusCode: 200 //规定成功的状态码,默认:0
//, msgName: 'hint' //规定状态信息的字段名称,默认:msg
//, countName: 'total' //规定数据总数的字段名称,默认:count
//, dataName: 'rows' //规定数据列表的字段名称,默认:data
//}
//,initSort: {
// field: 'id' //排序字段,对应 cols 设定的各字段名
// , type: 'desc' //排序方式 asc: 升序、desc: 降序、null: 默认排序
//}
})

layui 表格工具栏:

<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="details">详情</a>
<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

table.on('tool(SysSampleIndexTable)', function (obj) {
//调试 -> console.log(obj)
var id = obj.data.id;

if (obj.event === 'del') {
layer.confirm('@Suggestion.YouWantToDeleteTheSelectedRecords', function (index) {
//obj.del();

//post请求删除
$.post('/SysSample/Delete', { "id": id }, function (Result) {
//提示成功或失败
if (Result.type = 1) {
layer.msg('@Suggestion.DeleteSucceed', {
offset: 'rb',
icon: 1,
})
}
else {
layer.msg('@Suggestion.DeleteFail', {
offset: 'rb',
icon: 1,
})
}
initTable("");

}, 'json');

layer.close(index);
});
} else if (obj.event === 'edit') {
layer.open({
type: 2,
title: '编辑',
maxmin: true,
shade: 0.8,
area: ['450px', '90%'],
content: '/SysSample/Edit?id=' + encodeURI(id) //iframe的url});
})
}
else if (obj.event === "details") {//详情页
layer.open({
type: 2,
title: '详情',
maxmin: true,
shade: 0.8,
area: ['450px', '90%'],
content: '/SysSample/Details?id=' + id //iframe的url});
})
}
});

.net mvc 框架实现后台管理系统 2的更多相关文章

  1. .net mvc 框架实现后台管理系统 3

    左侧菜单实现 默认html <div class="layui-side layui-bg-black h-slide"> <div class="la ...

  2. .net mvc 框架实现后台管理系统4-layedit使用

    做个简单的文章发布,使用了layui的layedit 效果: 在html页面添加: <textarea id="MyArticleContent" style="d ...

  3. .net mvc 框架实现后台管理系统

    原文: https://www.cnblogs.com/ymnets/p/3424309.html -->底层实现 https://www.layui.com/ -->UI实现

  4. asp.net EF+MVC+Bootstrap 通用后台管理系统

    需要源码,请加QQ:858-048-581 开发环境: VS2012或以上 数据库: SQL Server 2008R2或以上   基于EF+MVC+Bootstrap构建通用后台管理系统,集成轻量级 ...

  5. React MVC框架 <某某后台商品管理开源项目> 完成项目总结

    **百货后台商品信息开源项目 1.利用React  app脚手架 2.封装打包 buid 3.更偏向于后台程序员开发思维 4.利用的 react -redux    react-router-dom  ...

  6. 分享基于EF+MVC+Bootstrap的通用后台管理系统及架构(转)

    http://www.cnblogs.com/guozili/p/3496265.html 基于EF+MVC+Bootstrap构建通用后台管理系统,集成轻量级的缓存模块.日志模块.上传缩略图模块.通 ...

  7. 基于EF+MVC+Bootstrap的通用后台管理系统及架构

    分享基于EF+MVC+Bootstrap的通用后台管理系统及架构 基于EF+MVC+Bootstrap构建通用后台管理系统,集成轻量级的缓存模块.日志模块.上传缩略图模块.通用配置及服务调用, 提供了 ...

  8. 分享基于EF+MVC+Bootstrap的通用后台管理系统及架构

      基于EF+MVC+Bootstrap构建通用后台管理系统,集成轻量级的缓存模块.日志模块.上传缩略图模块.通用配置及服务调用, 提供了OA.CRM.CMS的原型实例,适合快速构建中小型互联网及行业 ...

  9. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(2)-easyui构建前端页面框架[附源码]

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(2)-easyui构建前端页面框架[附源码] 开始,我们有了一系列的解决方案,我们将动手搭建新系统吧. 用 ...

随机推荐

  1. angular之增删改查

    <!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta ...

  2. 关于EMGCU中的cvertern.dll无法找到的问题

    方法1:自己到EMgucv目录的bin里面拷贝x86文件夹到自己程序的debug目录 方法2:将这个X86目录添加到PATH变量,记得要注销,否则新添加的无法起作用,VS2010还显示无法找到.

  3. Synchronized关键字、Lock,并解释它们之间的区别

    Synchronized 与Lock都是可重入锁,同一个线程再次进入同步代码的时候.可以使用自己已经获取到的锁. Synchronized是悲观锁机制,独占锁.而Locks.ReentrantLock ...

  4. Oracle之DBMS_SQL包用法详解

    对于一般的(select)操作,如果使用动态的sql语句则需要进行以下几个步骤:open  cursor--->parse---> bind  variable  ---> defi ...

  5. php入门学习

    尤其不认可W3school之类的东西,不够深度,理解不深,比起这个更建议看官方文档,中文不清楚,看英文的. 入门视频:入门视频推荐:哈佛大学公开课:构建动态网站Beginner PHP and MyS ...

  6. C++的引用的使用

    1引用的定义 引用时C++对C的一个重要的扩充,引用的作用是给变量起一个别名. 例如: int a; int &b=a;//声明b是a的引用 经过以上的声明,b就成为了a的别名,a和b的地位以 ...

  7. java的邮件系统实现

    想要java中邮件发送和接收邮件,首先需要支持SMTP- pop/pop3/IMAP协议,发送的话还需要配置文件,来对程序提供相应的接口,只需要这两个文件,就可以实现邮件的接收发送, 协议为jar包封 ...

  8. MinGW lapack 在windows 上安装

    MinGW基本的配置环境 编译安装 方案一:MinGW Makefiles 我的配置好之后mingw文件夹下没有mingw32-make.exe,使用 mingw-get install mingw3 ...

  9. 华为2013年西安java机试题目:如何过滤掉数组中的非法字符。

    这道题目为记忆版本: 题目2描述: 编写一个算法,过滤掉数组中的非法字符,最终只剩下正式字符. 示例:输入数组:“!¥@&HuaWei*&%123” 调用函数后的输出结果,数组:“Hu ...

  10. Luogu 3911 最小公倍数之和

    感觉自己被早上的名校协作体和下午的数学题虐哭了,每天为自己的菜发愁…… 发现$a_{i}$很小,开一个桶记一下每个数 出现的个数,设$c_{i} = \sum_{j = 1}^{n}(a_{j} == ...