前端

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

<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. JetBrainsIDEA-structure结构继承的图标说明

    图标3表示重写继承类中方法 图标2表示实现继承类抽象方法或接口中的方法 图标1表示未使用继承类中的方法 类中方法并非只统计显示继承类或实现接口中方法,而是对该类中所有方法进行分类,有可能某些方法是继承 ...

  2. 爬虫中BeautifulSoup4解析器

    CSS 选择器:BeautifulSoup4 和 lxml 一样,Beautiful Soup 也是一个HTML/XML的解析器,主要的功能也是如何解析和提取 HTML/XML 数据. lxml 只会 ...

  3. Linux_CentOS中Mongodb4.x 安装调试、远程管理、配置 mongodb 管理员密码

    Mongodb4.x 安装 官方文档:https://docs.mongodb.com/manual/tutorial/install-mongodb-on-red-hat/ 1.配置 yum 源 1 ...

  4. Cannot start service WMSvc on computer '.'.

    批处理,管理员权限执形 taskkill /im wmsvc.exe /f net stop WMSVC net start WMSVC pause

  5. [译]如何根据Pandas中的列名获取列所在的index位置?

    原文来源:https://stackoverflow.com/questions/13021654/get-column-index-from-column-name-in-python-pandas ...

  6. 【SSH进阶之路】Spring的AOP逐层深入——AOP的基本原理(六)

    经过我们对Spring的IOC不断的深入学习,Spring的面貌逐渐变得清晰,我们对Spring的了解也更加的深入.从这篇博文开始我们学习Spring的第二大核心内容:AOP. 什么是AOP AOP( ...

  7. 逸鹏说道公众号福利:逆天常用的一些谷歌浏览器插件V1.3

    插件导出:http://www.cnblogs.com/dunitian/p/5426552.html 插件导入:https://www.cnblogs.com/dotnetcrazy/p/97537 ...

  8. 测试从应用到DB的准确的网络延迟

    最近几大云厂商把底层的基础设施包装起来后,通过Ping等很难知道真正的网络延迟了,因为通过ping还没到db都返回了,如何知道从应用到db的真正网络延迟呢? 用我的脚本 #!/bin/bash m= ...

  9. C 风格字符串、string 类要点总结

    1. C风格字符串 1.1 其它 头文件<cstring> 特殊性质:C风格字符串以空字符\0结尾 1.2 读取一行的区别 1.2.1 cin.getline(array1,n,char) ...

  10. day39——SQL语句简单介绍、库、表、记录、安装mysql简单命令

    day39 SQL语句简单介绍 库(增删改查) 查看数据库 show databases; 查看其中一个库 show create database db1; 创建数据库 create databas ...