小白开学Asp.Net Core 《九》
程序员文章站
2022-03-11 08:41:15
小白开学Asp.Net Core 《九》 — — 前端篇(不务正业) 在《小白开学Asp.Net Core 三》中使用了X-admin 2.x 和 Layui将管理后端的界面重新布局了,里面简单的介绍了layui table 的使用以及页面table所需的数据做了简单的封装。今天扩展学习下。 一、L ......
小白开学asp.net core 《九》
— — 前端篇(不务正业)
在《小白开学asp.net core 三》中使用了x-admin 2.x 和 layui将管理后端的界面重新布局了,里面简单的介绍了layui table 的使用以及页面table所需的数据做了简单的封装。今天扩展学习下。
一、layui 第三方组件的使用
1)、下载安装位置
在layui官方提供的模块满足不了我们的时候,我们可以在layui 第三方组件平台上寻找我们所需的组件来满足我们的需求,我们将找见的模块下载下来后放在统一的地方,如下图所示:
在本项目中我将放在了上图所示的地方。
目前在此项目中用到了authtree、treeselect和treetable三个第三方组件。
2)全局配置(官方)
//config的设置是全局的 layui.config({ base: '/res/js/' //假设这是你存放拓展模块的根目录 }).extend({ //设定模块别名 mymod: 'mymod' //如果 mymod.js 是在根目录,也可以不用设定别名 ,mod1: 'admin/mod1' //相对于上述 base 目录的子目录 }); //你也可以忽略 base 设定的根目录,直接在 extend 指定路径(主要:该功能为 layui 2.2.0 新增) layui.extend({ mod2: '{/}http://cdn.xxx.com/lib/mod2' // {/}的意思即代表采用自有路径,即不跟随 base 路径 }) //使用拓展模块 layui.use(['mymod', 'mod1'], function(){ var mymod = layui.mymod ,mod1 = layui.mod1 ,mod2 = layui.mod2; mymod.hello('world!'); //弹出 hello world! });
二、前后结合使用
1)定义前端展示所需的数据格式
using system.collections.generic; namespace aju.carefree.dto.viewmodel { /// <summary> /// 前端页面 /// </summary> public class frontpagebaseviewmodel { /// <summary> /// 状态码 /// </summary> public int code { get; set; } = 0; /// <summary> /// 操作消息 /// </summary> public string msg { get; set; } = "操作成功"; /// <summary> /// 数据内容 /// </summary> public dynamic data { get; set; } } /// <summary> /// layer ui table 数据返回格式 /// </summary> #region layer ui table public class tabledatamodel : frontpagebaseviewmodel { /// <summary> /// 总记录条数 /// </summary> public int count { get; set; } } #endregion /// layui authtree 返回数据格式 /// </summary> #region layui authtree 返回数据格式 public class authtreeviewmodel : frontpagebaseviewmodel { } public class authtreeviewmodelext { public list<authtreeviewmodellist> trees { get; set; } } public class authtreeviewmodellist { public string name { get; set; } public string value { get; set; } public bool @checked { get; set; } public list<authtreeviewmodellist> list { get; set; } } #endregion /// <summary> /// layui tree 前端数据 viewmodel /// </summary> #region layui tree public class layuitreeviewmodel { /// <summary> /// 节点标题 /// </summary> public string title { get; set; } /// <summary> /// 节点唯一索引,用于对指定节点进行各类操作 /// </summary> public string id { get; set; } /// <summary> /// 点击节点弹出新窗口对应的 url。需开启 isjump 参数 /// </summary> public string href { get; set; } /// <summary> /// 节点是否初始展开,默认 false /// </summary> public bool spread { get; set; } = true; /// <summary> /// 节点是否初始为选中状态(如果开启复选框的话),默认 false /// </summary> public bool @checked { get; set; } = false; /// <summary> /// 节点是否为禁用状态。默认 false /// </summary> public bool disabled { get; set; } = false; public list<layuitreeviewmodel> children { get; set; } } #endregion /// <summary> /// layui treeselect 前端数据 viewmodel /// </summary> #region layui treeselect public class treeselectviewmodel { public string id { get; set; } public string name { get; set; } public bool open { get; set; } = true; public bool @checked { get; set; } = false; public list<treeselectviewmodel> children { get; set; } } #endregion }
2)、返回数据
以tree select为例
服务实现层:
public async task<list<treeselectviewmodel>> gettreeselectviewmodel() { var viewmodellist = new list<treeselectviewmodel>(); var list = await _repository.findlistbyclauseasync(s => s.enabledmark == true && s.deletemark == false); list.where(s => s.parentid == "0").tolist().foreach(item => { var viewmodel = new treeselectviewmodel { id = item.id, name = item.fullname }; getitemsentitybyparentid(item.id, viewmodel, list); viewmodellist.add(viewmodel); }); return viewmodellist; } private treeselectviewmodel getitemsentitybyparentid(string parendid, treeselectviewmodel viewmodel, ienumerable<itemsentity> list) { var items = list.where(s => s.parentid.equals(parendid)); if (!items.any()) return null; list<treeselectviewmodel> layuitreeviewmodelslist = new list<treeselectviewmodel>(); items.tolist().foreach(item => { treeselectviewmodel layuitreeviewmodel = new treeselectviewmodel { id = item.id, name = item.fullname }; getitemsentitybyparentid(item.id, layuitreeviewmodel, list); layuitreeviewmodelslist.add(layuitreeviewmodel); }); viewmodel.children = layuitreeviewmodelslist; return viewmodel; }
controller
[httpget] public async task<string> getitemdata() { var data = await _itemservice.gettreeselectviewmodel(); return jsonhelper.instance.serialize(data); }
3)、前端展示
html
<div class="layui-input-block"> <input type="text" id="parentid" name="parentid" lay-filter="tree" required lay-verify="parentid" lay-reqtext="请选择上级" class="layui-input"> </div>
封装js
layui.config({ base: '/lib/extends/' }).extend({ treeselect: 'treeselect/treeselect' }); //这是前面介绍的全局配置第三方组件 /* * @method ajucarefree_treeselect * @desc treeselect */ ajucarefree_treeselect = function (options) { var defaults = { elem: null, dataurl: '', type: 'get', placeholder: '默认提示信息', search: true, clickcall: null, nodevalue: null, elemext: null }; var options = extend(defaults, options); layui.use(['treeselect', 'form'], function () { var treeselect = layui.treeselect; treeselect.render({ // 选择器 elem: options.elem, // 数据 data: options.dataurl, // 异步加载方式:get/post,默认get type: options.type, // 占位符 placeholder: options.placeholder, // 是否开启搜索功能:true/false,默认false search: options.search, style: { folder: { // 父节点图标 enable: true // 是否开启:true/false }, line: { // 连接线 enable: true // 是否开启:true/false } }, // 点击回调 click: function (d) { // console.log(d); //console.log(d.treeid); // 得到组件的id //console.log(d.current.id); // 得到点击节点的treeobj对象 //console.log(d.data); // 得到组成树的数据 options.clickcall(d.current.id); }, // 加载完成后的回调函数 success: function (d) { if (options.nodevalue !== null && options.nodevalue !== undefined && options.nodevalue !== "") { treeselect.checknode(options.elemext, options.nodevalue); } } }); }); }; /* * @method 函数用于将一个或多个对象的内容合并到目标对象 * @desc 函数用于将一个或多个对象的内容合并到目标对象 */ function extend() { var length = arguments.length; var target = arguments[0] || {}; if (typeof target !== "object" && typeof target !== "function") { target = {}; } if (length === 1) { target = this; i--; } for (var i = 1; i < length; i++) { var source = arguments[i]; for (var key in source) { // 使用for in会遍历数组所有的可枚举属性,包括原型。 if (object.prototype.hasownproperty.call(source, key)) { target[key] = source[key]; } } } return target; }
js 绑数据
<script src="~/js/aju.carefree.treeselect.js"></script> <script> ajucarefree_treeselect({ elem: '#parentid', dataurl: '/item/getitemdata', placeholder: '请选择上级菜单', nodevalue: '@model.id', elemext: 'tree', clickcall: function (d) { document.getelementbyid("parentid").value = d;//将选中的值赋值给 parentid } }); </script>
三、最终展示
(图中圈中的就是今天演示的)
今天就写到这里,如果有同学在使用layui时起到引导作用就可以说达到本篇写作的目的了。如果还有其他疑问,可以加群交流。
说明:
layui 文档:()
layui 第三方组件:()
其他的组件使用可以在github上查看。
上一篇: Python全栈学习_day002作业
下一篇: 深入理解Java中的锁(一)