.net core layui折叠表格的应用。
效果展示
头部的折叠,展开,搜索按钮
<div class="layui-fluid"> <div style="margin-top: 20px;">
<div class="layui-btn-group">
<button class="layui-btn " id="btn-expand"><i class="layui-icon layui-icon-down"></i> 全部展开</button>
<button class="layui-btn " id="btn-fold"><i class="layui-icon layui-icon-left"></i> 全部折叠</button>
<button class="layui-btn " id="btn-refresh"><i class="layui-icon layui-icon-loading"></i> 刷新表格</button>
</div>
<div class="layui-inline">
<input class="layui-input" id="edt-search" value="" placeholder="输入关键字">
</div> <button class="layui-btn" id="btn-search" type="button">搜索</button>
</div>
</div>
<table id="table1" class="layui-table" lay-filter="table1"></table>
<script type="text/html" id="toolbarDemo"> </script>
<script type="text/html" id="auth-state">
<a class="layui-btn layui-btn-small layui-btn-xs" onclick="def_Open('编辑用户','/CoreNetPrejectManager/PrejectItem/Edit?Id={{d.Kid}}')" lay-event="edit">修改</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
下载module/treetable-lay整个文件夹,放在你的项目里面,然后使用模块加载的方式使用:
<script>
layui.config({
base: '/xadmin/lay/modules/'
}).extend({
treetable: 'treetable-lay/treetable'
}).use(['treetable'], function () {
var treetable = layui.treetable; });
<div class="layui-fluid">
引用的表格
<script>
layui.use(['treetable', 'layer', 'table','jquery', 'form', 'element'], function () {
var layer = layui.layer, $ = layui.jquery, form = layui.form; table = layui.table;
var treetable = layui.treetable;
var layer = layui.layer;
// 渲染表格
treetable.render({
treeColIndex: 0, // treetable新增参数
treeSpid: 1,
treeIdName: 'd_id',
treePidName: 'd_pid',
treeDefaultClose: true,
treeLinkage: true,
elem: '#table1',
url: '/UpFile/tree.json',
toolbar: '#toolbarDemo',
cols: [[
//{ type: 'checkbox' },
{ field: 'name', title: '任务事项' },
{ field: 'PlanStart', title: '计划开始时间' },
{ field: 'PlanEnd', title: '计划结束时间' },
{ field: 'ActualTime', title: '实际完成时间' },
{ field: 'FisStatus', title: '完成状态' },
{ field: 'FisPeriod', title: '完成周期' },
{ field: 'BuggetMoney', title: '月算费用' },
{ field: 'FinalMoney', title: '决算费用' },
{ field: 'RespDepartmentName', title: '责任部门' },
{ field: 'ResUidName', title: '责任人' },
{ templet: '#auth-state', width: 150, align: 'center', title: '操作' }
]]
});
table.on('tool(table1)', function (obj) {
var data = obj.data;
var layEvent = obj.event; if (layEvent === 'del') { alert('你不可以删除' + data.name);
}
});
//全部展开
$(document).on("click","#btn-expand",function(){
treetable.expandAll('#table1');
}); //全部折叠
$(document).on("click","#btn-fold",function(){
treetable.foldAll('#table1');
}); //刷新表格
$(document).on("click","#btn-refresh",function(){
location.reload();
});
//搜索
$(document).on("click","#btn-search",function(){
var keyword = $('#edt-search').val();
var searchCount = 0;
$('#table1').next('.treeTable').find('.layui-table-body tbody tr td').each(function () {
$(this).css('background-color', 'transparent');
var text = $(this).text();
if (keyword != '' && text.indexOf(keyword) >= 0) {
$(this).css('background-color', 'rgba(250,230,160,0.5)');
if (searchCount == 0) {
treetable.expandAll('#table1');
$('html,body').stop(true);
$('html,body').animate({scrollTop: $(this).offset().top - 150}, 500);
}
searchCount++;
}
});
if (keyword == '') {
layer.msg("请输入搜索内容", {icon: 5});
} else if (searchCount == 0) {
layer.msg("没有匹配结果", {icon: 5});
}
});
});
</script>
注意:
可以使用url传递数据,也可以使用data传递数据,如果使用url传递数据,参数是where字段, 跟layui数据表格的使用方式一致。
数据格式
总而言之就是以id、pid的形式,不是以subMenus的形式,当然id、pid这两个字段的名称可以自定义:
- {
- "code": 0,
- "msg": "ok",
- "data": [{
- "id": 1,
- "name": "xx",
- "sex": "male",
- "pid": -1
- },{
- "id": 2,
- "name": "xx",
- "sex": "male",
- "pid": 1
- }
- ]
- }
2.3.参数说明
layui数据表格的所有参数都可以用,除此之外treetable新增的参数有:
2.3.参数说明
layui数据表格的所有参数都可以用,除此之外treetable新增的参数有:
参数 | 类型 | 是否必填 | 描述 |
---|---|---|---|
treeColIndex | int | 是 | 树形图标显示在第几列 |
treeSpid | object | 是 | 最上级的父级id |
treeIdName | string | 否 | id字段的名称 |
treePidName | string | 否 | pid字段的名称 |
treeDefaultClose | boolean | 否 | 是否默认折叠 |
treeLinkage | boolean | 否 | 父级展开时是否自动展开所有子级 |
根据需求按条件拿到自己需要的DataTable数据
public IActionResult ManagerProgress(int TempId)
{
int RecordCount = 0;
List<DtItem> Variable = new List<DtItem>()
{
new DtItem("TempId",SqlDbType.Int,4,TempId),
};
var listData = SqlProcedure.getDataTable(Variable, "CoreNetPrejectItem_GetList", out RecordCount);//调用得是存储过程方法
DataTable dtlist = listData;
ProgressList(dtlist);
return View();
}
用DataTable传送数据拼接成需要的数据格式
public void ProgressList(DataTable dtlist)
{
if (dtlist != null && dtlist.Rows.Count > 0)
{
string json = "{\"code\": 0,\"msg\": \"ok\",\"data\": [";
foreach (DataRow item in dtlist.Rows)
{
json += " {\"id\": "
+ int.Parse(item["StageId"].ToString())
+ ", \"name\": \"" + item["PrejectName"].ToString()
+ "\",\"PlanStart\":\"" + item["StartTime"].ToString()
+ "\",\"PlanEnd\":\"" + item["EndTime"].ToString()
+ "\",\"ActualTime\":\"" + item["ConcreteTime"].ToString()
+ "\",\"FisStatus\": " + int.Parse(item["State"].ToString())
+ ",\"FisPeriod\": " + int.Parse(item["Period"].ToString())
+ ",\"BuggetMoney\": " + decimal.Parse(item["MonthlyPrice"].ToString())
+ ",\"FinalMoney\": " + decimal.Parse(item["BudgetPrice"].ToString())
+ ",\"RespDepartmentName\": \"" + item["DepartName"].ToString()
+ "\",\"ResUidName\": \"" + item["UserName"].ToString()
+ "\",\"Kid\": " + int.Parse(item["Id"].ToString())
+ ",\"pid\": " + int.Parse(item["PId"].ToString())
+ "},";
}
json = json.TrimEnd(',');
json += "]}";
//目录名
string sFilePath = FileHelper.CheckAndCreateFile("UpFile/tree.json", true);
FileHelper.SaveFile(sFilePath, json, "utf-8");
}
}
百度搜索layui折叠表格也可以搜到的,只不过数据接口的json格式需要自己根据实际情况采用拼接还是其他方法。
.net core layui折叠表格的应用。的更多相关文章
- layui树形表格支持非异步和异步加载
layui树形表格支持非异步和异步加载. 仓库地址:https://gitee.com/uniqid/ 使用示例如下: <div class="uui-admin-common-bod ...
- 项目总结19:layui实现表格渲染、表格搜索、数据获取
项目总结19:layui实现表格渲染.表格搜索.数据获取 1-参考资料:https://www.layui.com/demo/table/reload.html 2-本次总结的是layui的表格功能, ...
- LayUI——数据表格使用
Layui数据表格的实际项目使用 Layui的数据表格可谓是在后台管理的页面中经常用到的工具了 最近做项目就用到了,项目的要求是用数据表格显示出后台文章的列表并且每一行的文章都有对应的修改删除操作按钮 ...
- 折叠表格思路及遇到的问题(tableView:viewForHeaderInSection:的section从1开始,不是从0开始)
项目需要做了一个类似qq联系人的折叠表格,思路很简单:设置每个section的header,在header上显示组名等信息,然后根据折叠与否,设置每个section中cell的数量,如果折叠,则将之设 ...
- layui-table-column-select(layui数据表格可搜索下拉框select)
layuiTableColumnSelect 在layui table的基础上对表格列进行扩展:点击单元格显示可搜索下拉列表. 码云地址:https://gitee.com/yangqianlong9 ...
- css折叠表格
1.html <div class="custom-fold-table"> <table cellpadding="0" cellspaci ...
- 【Layui】当Layui数据表格和Layui下拉框组合时发生的问题
关于Layui数据表格用下拉框显示问题 如图所示 可以看见当点击下拉框时下拉选项被下拉框覆盖 此时你需要在数据表格渲染完成时的回调内添加如下代码即可 $(".sel_scrq"). ...
- Layui数据表格模型
视图模型 package com.meiyou.model; import org.springframework.context.annotation.Bean; import java.io.Se ...
- Layui数据表格的接口数据请求方式为Get
Layui数据表格的接口数据请求方式为Get
- 基于layui,Jquery 表格动态编辑 设置 编辑值为 int 或者 double 类型及默认值
首先先推荐大家在看这篇笔记时,阅读过我写的这篇 Layui表格编辑[不依赖Layui的动态table加载] 阅读过上面那篇笔记之后呢,才能更好的理解我现在所要说的这个东西 接下来废话不多说,上代码. ...
随机推荐
- .Net7运行模型之托管Main函数的调用
前言: .Net7的CLR最具特色的一个地方,就是运行模型.因为它主宰了整个CLR的运行过程. 又因为其庞大的代码量,有的几十万行甚至百万行.所以理解起来非常不容易.本篇拆分来看下,里面一个细节Mai ...
- 动态代理-cglib分析
生成代理类文件的方式 jvm添加此启动参数,后面就是代理类class生成的地址 -Dcglib.debugLocation=~/baldhead/java/dynamic-proxy-cglib/sr ...
- element-UI el-table动态显示隐藏列造成固定一侧的列(fixed=“left/right“)错误显示
问题原因:多个tabs共用一个实体,动态显示隐藏列 出现了固定在右侧的列(fixed="right")错位 [解决方案] 表格的重新布局,只要table数据发生变化的时候就重新渲染 ...
- keypoint数据结构
公有属性 (float)angle:角度,表示关键点的方向,-1为初值. (int)class_id:当要对图片进行分类时,我们可以用class_id对每个特征点进行区分,未设定时为-1,需要靠自己设 ...
- 【KAWAKO】MobaXterm-使用MobaSSHTunnel进行端口映射
目录 在Tools中打开MobaSSHTunnel(port forwarding) 点击New SSH tunnel 配置信息 点击运行 访问端口 在Tools中打开MobaSSHTunnel(po ...
- 最大K段和
题目大意 有一个长度为 \(N\) 的序列 \(A\) .他希望从中选出不超过 \(K\) 个连续子段,满足它们两两不相交,求总和的最大值(可以一段也不选,答案为 \(0\)). 分析 很容易想到 \ ...
- [BSR文摘] 如何解释CRP正常而多普勒超声显示关节炎活动的RA亚型
如何解释CRP正常而多普勒超声显示关节炎活动的RA亚型 Braford CM, et al.Rheumatology 2016. Present ID: 72. 背景:临床门诊越来越多地利用肌肉骨骼超 ...
- dotnet core+nginx+supervisor
1.前提准备 安装虚拟机,安装CentOS,有云服务器的直接用云服务器就行 本地安装 xshell.xftp 2.nginx配置静态页面 我们先学习一下使用nginx配置一个静态页面,一步一步来深入 ...
- sqlserver 循环插入脚本
Declare @i int = 0 -- 说明需要插入的列值 WHILE @i< 1000000 BEGIN -- 需要写入数据的值 insert into ... set @i = @i + ...
- Windows打开代理快捷方式
最近使用电脑需要频繁打开关闭网络代理(全局代理会导致一些网站打不开),在想有没有快捷方式,一搜果然有,看来有跟我一样的使用习惯的人. 传统切换代理开关,步骤如下: 设置 => 网络和 Inter ...