济南网站建设策划,注入漏洞网站源码,建设网站的HTML代码,wordpress某个分类不在首页显示小白开学Asp.Net Core 《九》 — — 前端篇#xff08;不务正业#xff09;在《小白开学Asp.Net Core 三》中使用了X-admin 2.x 和 Layui将管理后端的界面重新布局了#xff0c;里面简单的介绍了layui table 的使用以及页面table所需的数据做了简单的封装。今天扩展学习下。… 小白开学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 ListAuthTreeViewModelList trees { get; set; } } public class AuthTreeViewModelList { public string name { get; set; } public string value { get; set; } public bool checked { get; set; } public ListAuthTreeViewModelList 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 ListLayuiTreeViewModel 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 ListTreeSelectViewModel children { get; set; } } #endregion }2、返回数据 以Tree Select为例 服务实现层public async TaskListTreeSelectViewModel GetTreeSelectViewModel() { var viewModelList new ListTreeSelectViewModel(); 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, IEnumerableItemsEntity list) { var items list.Where(s s.ParentId.Equals(parendId)); if (!items.Any()) return null; ListTreeSelectViewModel layuiTreeViewModelsList new ListTreeSelectViewModel(); 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 Taskstring GetItemData()
{ var data await _itemService.GetTreeSelectViewModel(); return JsonHelper.Instance.Serialize(data);
}3、前端展示 html div classlayui-input-block input typetext idParentId nameParentId lay-filtertree required lay-verifyParentId lay-reqText请选择上级 classlayui-input
/div封装jslayui.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 文档https://www.layui.com/doc/ layui 第三方组件https://fly.layui.com/extend/ 其他的组件使用可以在github上查看。
