前端

注:监听工具条没有详细写,但路子一样的

<script>
//页面加载;初始化
$(function () {
GetDepartment_Position(10);
})
function GetDepartment_Position(ID) {
var sysurl = "/B_Position/Json_GetDepartment_Position";
layui.use('table', function () {
var table = layui.table;
table.render({
elem: '#DataTable'
, url: sysurl
, method: 'post'
, contentType: 'application/json'
, where: { ID: ID }////////////////////////////很重要的属性可以向后台传值!!!!!!!!
, cols: [[
{ type: 'checkbox' }
, { field: 'P_ID', width: 50, title: 'ID', align: 'center' }
, { field: 'P_Name', minwidth: 200, title: '岗位名称' }
, { field: 'D_Name', minwidth: 200, title: '所属部门' }
, { fixed: 'right', minwidth: 160, align: 'center', toolbar: '#barDemo', title: '操作' }
]]
, page: true
});
//监听工具条
table.on('tool(DataTable)', function (obj) {
var data = obj.data;
if (obj.event === 'detail') {
//编辑
GetUserDetails(data);
BtnSubmitType_User(true);
} else if (obj.event === 'del') {
//删除
layer.confirm('确定要删除此条记录?', function (index) {
DelUser(data.U_ID);
//obj.del();
layer.close(index);
});
} else if (obj.event === 'reset') {
//密码重置
layer.confirm('确定要重置密码?', function (index) {
ResetPWD(data.U_ID);
layer.close(index);
});
}
});
}
)
}
</script>
<div class="layui-tab-item layui-show">
<table class="layui-hide" id="DataTable" lay-filter="DataTable"></table>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="detail">编辑</a>
<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="reset">重置</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</div>
<h1 style="color:blue">后端</h1>
/// <summary>
/// layui.table后台处理+分页
/// </summary>
/// <param name="page">前端layui.table传来的页数</param>
/// <param name="limit">前端layui.table传来的每页数据量</param>
/// <param name="ID">前端layui.table中where: { ID: ID }传来的参数变量</param>
/// <returns></returns>
public ActionResult Json_GetDepartment_Position( int page,int limit, string ID)
{
//sql语句
string sql = "SELECT P_ID,D_Name,P_Name FROM View_Sys_Position_Department where D_ID ={0}";
List<P_lst> dataList = DBManage.GetListBySql<P_lst>(string.Format(sql,ID)); //count, data ,code, msg必须返回给前端的,4个不能变
int count = dataList.Count;
List<P_lst> data = dataList;
int code = 0;
string msg = "";
var MyObj = new { count, data ,code, msg};
return Json(MyObj);
}
public class P_lst
{
//临时写的小类用于存放sql 查询返回的数据
public int P_ID { get; set; }
public string D_Name { get; set; }
public string P_Name { get; set; }
} <h1 style="color:blue">(后端或) List《dynamic》 dataList代替List《P_lst》 dataList</h1> /// <summary>
/// layui.table后台处理+分页
/// </summary>
/// <param name="page">前端layui.table传来的页数</param>
/// <param name="limit">前端layui.table传来的每页数据量</param>
/// <param name="ID">前端layui.table中where: { ID: ID }传来的参数变量</param>
/// <returns></returns>
public string Json_GetDepartment_Position(Layui_Page objPage, string ID)
{
int intDataCount = -1;
Layui_Table LayTable = new Layui_Table();
string sql = "SELECT P_ID,D_Name,P_Name FROM View_Sys_Position_Department where D_ID ={0}";
List<dynamic> dataList = DBManage.GetListBySql<dynamic>(string.Format(sql,ID));
var dd1= JsonConvert.SerializeObject(dataList);
LayTable.code = 0;
LayTable.msg = "";
LayTable.count = intDataCount;
LayTable.data = dataList;
return JsonConvert.SerializeObject(LayTable);
} Json序列化 总结 https://www.cnblogs.com/jsll/p/11857205.html





Json序列化 总结 https://www.cnblogs.com/jsll/p/11857205.html

layui.table前端+后台处理+分页的更多相关文章

  1. layui table 前台数字格式保留两位小数,不足补0(mysql 数据库)

    layui table 对于后台json数据,有数字的,默认不会原样显示,而是只取数值,即100.00显示为100.如果想原样显示,需转为字符串. 项目采用mysql数据库,字段类型为decimal( ...

  2. 项目总结17-使用layui table分页表格

    项目总结17-使用layui table分页表格总结 前言 在项目中,需要用到分页的表格来展示数据,发现layui的分页表格,是一个很好的选择:本文介绍layui table分页表格的前后端简单使用 ...

  3. Layui Table 分页记忆选中

    Layui Table 分页记忆选中 挺好的功能,之前为什么放弃了,哈哈哈! 在最早的版本中,layui 的 table 会记录每页的勾选状态,但很多用户反馈这是 bug,因为当他们获取选中数据时,其 ...

  4. layui table 分页 序号始终从”1“开始解决方法

    在用Layui table 分页显示数据,用 type:"numbers" 进行显示序号有以下的问题 1.表格自带的分页,page:true 这种分页,在切换页面的时候序号可以正常 ...

  5. layui table 分页 记住之前勾选的数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. layui table分页 page为false时,limit问题

    问题描述:table数据表格page设为false时,limit为默认设置10 解决办法:limit设为 Number.MAX_VALUE 加载全部数据 实例: var table = layui.t ...

  7. Layui table 组件的使用:初始化加载数据、数据刷新表格、传参数

    背景 笔者之前一直使用 bootstrap table ,因为当前项目中主要使用 Layui 框架,于是也就随了 Layui table ,只是在使用的时候出现了一些问题,当然也是怪自己不熟悉的锅吧! ...

  8. layui table 表格查询无效问题

    [热身话题] 在开发的过程中,大量数据的展示大多采用表格的方式,直观,清晰.在这里,我也使用过一些框架Bootstrap.table ,Dev table ,layui table.本次采用的layu ...

  9. layui table表格详解

    上次做table有些东西 忘记了 这次当作来个分析总结一下  跟大家共同学习 闲话不多说 直接上例子   代码: <form id="form1" runat="s ...

随机推荐

  1. tf.gather和tf.gather_nd、tf.cast、tf.greater

    https://blog.csdn.net/Cyiano/article/details/76087747

  2. 使用draw.io桌面版代替visio制作流程图

    前言 draw.io是一款在github上的开源产品,由于需要构建在线文档,需要插入画图类型, 对比多款开源产品,最终选择了draw.io. draw.io图标资源非常的丰富,方便导入图标资源,基本上 ...

  3. 深入分析GCC

    深入分析GCC 目录 前言章 GCC概述 11.1 GCC的产生与发展 11.2 GCC的特点 21.3 GCC代码分析 3第2章 GCC源代码分析工具 42.1 vim ctags代码阅读工具 42 ...

  4. Microsoft OLE DB Provider for Oracle 在哪个安装包中

    http://www.oracle.com/technetwork/database/windows/downloads/utilsoft-098155.html oracle odbc downlo ...

  5. Springboot 禁用数据库自动配置

    转载至:https://blog.csdn.net/wyw815514636/article/details/80846545 https://blog.csdn.net/knqi007/articl ...

  6. C#反射技术的简单操作(读取和设置类的属性、属性值)

    public class A { public int Property1 { get; set; } } static void Main(){ A aa = new A(); Type type ...

  7. Redis哨兵(Sentinel)模式

    Redis哨兵(Sentinel)模式   主从切换技术的方法是:当主服务器宕机后,需要手动把一台从服务器切换为主服务器,这就需要人工干预,费事费力,还会造成一段时间内服务不可用.这不是一种推荐的方式 ...

  8. oracle11G 命令【导库数量对比】

    1.查询用户有哪些表 select * from all_tables where owner='ZJY'; 160 rows selected. 2. 查询总数 select object_type ...

  9. 使用命令行操控vmware--安装

    在虚拟化出现之前,服务器的使用率很低,一般只有15%-20%,其余的资源处于闲置状态,但vmware出现之后,首先,可以充分的利用资源,从而达到节约成本的目的,其次,使得虚机便于维护.一般小型公司使用 ...

  10. python实践项目六:正则表达式-强口令

    描述:写一个函数,它使用正则表达式,确保传入的口令字符串是强口令.强口令的定义是:长度不少于8 个字符,  同时包含大写和小写字符, 至少有一位数字. 代码: #!/usr/bin/python # ...