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. 第十章 Executor框架

    在Java中,使用线程来异步执行任务.Java线程的创建与销毁需要一定的开销,如果我们为每一个任务创建一个新线程来执行,这些线程的创建与销毁将消耗大量的计算资源.同时,为每一个任务创建一个新线程来执行 ...

  2. tomcat 三种部署方式以及server.xml文件的几个属性详解

    一.直接将web项目文件件拷贝到webapps目录中 这是最常用的方式,Tomcat的Webapps目录是Tomcat默认的应用目录,当服务器启动时,会加载所有这个目录下的应用.如果你想要修改这个默认 ...

  3. Xshell的简单使用

    1.下载并安装 Xshell 4打开后如下图所示,会出现一个界面框,这个界面框类似于DOS的界面,需要操控远程的主机,都是通过这个界面进行操作. 2在这个界面左上角的位置有一个文件按钮,点击这个按钮. ...

  4. MSSQL 当前数据库中已存在用户或角色,SQLServer2008,错误15023,

    原因: sql server中“登录”与“用户”的区别,“登录”用于用户身份验证,而数据库“用户”帐户用于数据库访问和权限验证.登录通过安全识别符 (SID) 与用户关联.将数据库恢复到其他服务器时, ...

  5. ms project展开和折叠任务

    1.视图——大纲——显示子任务 2.视图——大纲——隐藏子任务

  6. Python 安装 django框架

    1.安装 pip install django 2.创建项目 d:/www/django文件夹下右键->打开dos窗口 输入: python C:\ProgramData\Miniconda3\ ...

  7. SQL语句兼容性规范

    一.DDL兼容性规范(防止表结构变更后,原有的SQL执行报错)只能增加字段或修改字段长度(字段长度改大),不能修改字段名字和类型,不能删除字段不能删除表或者修改表名称 二.DML兼容性规范insert ...

  8. sleep()和usleep()

    函数名: sleep头文件: #include <windows.h> // 在VC中使用带上头文件        #include <unistd.h>  // 在gcc编译 ...

  9. C语言-郝斌笔记-004判断是否为回文数

    判断是否为回文数 # include <stdio.h> int main(void) { int val; //存放待判断的数字 int m; ; printf("请输入您需要 ...

  10. EZOJ #81

    传送门 分析 每次拿a中最大的去匹配b中最小的 至于原因画个图感性思考一下就可以啦 代码 #include<iostream> #include<cstdio> #includ ...