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. jumpserver跳板机的搭建

    搭建的跳板机基于0.3.2,别问我为什么不用0.5版本的,我能说我没有搭建成功么,步骤贼多,功能不完善,不建议生产环境使用 步骤其实很简单: github wiki :https://github.c ...

  2. maven依赖scope配置项讲解

    我们在使用Maven配置依赖项的时候,常常只会配置Maven的坐标以及版本信息就可以了,但我们看其他人的工程代码的时候常常会见到有个scope配置项,今天就来分别介绍下这个配置下几个类别的作用. &l ...

  3. eclipse中maven的配置与使用

    以eclipse Juno版本为例 1.插件安装 eclipse==>help====>install new software===>add name :m2e location: ...

  4. apache server和tomcat集群配置三:水平集群下的tomcat集群配置

    在jsp文件中加入以下代码,用来测试是否共享session: SessionID: <%= session.getId() %> 之前尝试在linux中,但是因为模拟环境是虚拟机,虚拟机只 ...

  5. hibernate学习笔记(6)组件属性以及单表操作

    组件属性:实体类中的某个属性属于用户自定义类的对象: 作用:将两个实体类合并在一起组建成一个表 在hbm.xml文件中配置: 格式: <component name="取的名字&quo ...

  6. 昨天的笔试题, StringBuffer

    代码: public static void switchStr(StringBuffer x, StringBuffer y) { x.append(y); System.out.println(& ...

  7. poj1753-Flip Game 【状态压缩+bfs】

    http://poj.org/problem?id=1753 Flip Game Time Limit: 1000MS   Memory Limit: 65536K Total Submissions ...

  8. [转]AJAX工作原理及其优缺点

    1.什么是AJAX?AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术.它使用:使用XHTML ...

  9. condition实现通知部分线程

    多个condition实现通知部分线程: import java.util.concurrent.locks.Condition; import java.util.concurrent.locks. ...

  10. MSScriptControl详解(可实现在C#等语言中调用JAVASCRIPT代码)

    ScriptControl接口 属性名称 类型 备注 AllowUI BOOL 检测是否允许运行用户的接口元素.如果为False,则诸如消息框之类的界面元素不可见. CodeObject Object ...