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. jackson 进行json与java对象转换 之四

    jackson简单使用,对象转json,json转对象,json转list   POJO序列化为json字符串: 准备一个POJO: @JsonIgnoreProperties(ignoreUnkno ...

  2. react常见面试题

    当你调用 setState 的时候,发生了什么事? 当调用 setState 时,React会做的第一件事情是将传递给 setState 的对象合并到组件的当前状态.这将启动一个称为和解(reconc ...

  3. 超详细的Maven使用教程

    原文:  http://blog.csdn.net/u010425776/article/details/52027706 主题 Maven 什么是Maven? 如今我们构建一个项目需要用到很多第三方 ...

  4. python笔记--4--面向对象

    面向对象 Python中对象的概念很广泛,Python中的一切内容都可以称为对象,除了数字.字符串.列表.元组.字典.集合.range对象.zip对象等等,函数也是对象,类也是对象. 在Python中 ...

  5. STM32 C++编程 002 GPIO类

    使用 C++ 语言给 STM32 编写一个 Gpio 类 我使用的STM32芯片:STM32F103ZET6 我们使用的STM32库版本:V3.5.0 注意: 想学习本套 STM32 C++编程 的专 ...

  6. loj2395 [JOISC 2017 Day 2]火车旅行

    传送门 分析 我们知道无论往左走还是往右走一定都是往不低于这个点的地方走 于是我们可以考虑用倍增来维护一个点向左和向右走$2^i$最远分别能走到哪里 我们可以先用单调栈求出直走一步的情况,之后再处理倍 ...

  7. EZOJ #79

    传送门 分析 在经过若干次操作之后一定会产生一堆环 而我们又发现从一个点到另一个点实际可以经过所有环 于是问题就转换成了$k_1s_1 + k_2s_2 + ... + len = t$ 其中$s_i ...

  8. Luogu 3627 [APIO2009]抢掠计划

    不爽. 为什么tarjan能爆栈啊 十分显然的缩点,给缩点之后的点连上权值为后一个点集权值的有向边,然后spfa跑最长路. 注意一开始$dis_{st}$应该等于$st$这个集合的权值. 时间复杂度$ ...

  9. delete请求,删除不成功?

    因为,在数据库底层,其实并没有删除该数据,只是将数据的标识设置为is_deleted.因此,最后即使删除了,查询的时候还是会显示在界面. 故,需要重写get请求.

  10. POJ 3411 Paid Roads (状态压缩+BFS)

    题意:有n座城市和m(1<=n,m<=10)条路.现在要从城市1到城市n.有些路是要收费的,从a城市到b城市,如果之前到过c城市,那么只要付P的钱, 如果没有去过就付R的钱.求的是最少要花 ...