小白开学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; } = ;
/// <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 == "").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 文档:(https://www.layui.com/doc/

  layui 第三方组件:(https://fly.layui.com/extend/

其他的组件使用可以在github上查看。

小白开学Asp.Net Core 《九》的更多相关文章

  1. 小白开学Asp.Net Core 《四》

    小白开学Asp.Net Core<三>                               —— 使用AspectCore-Framework 一.AspectCore-Frame ...

  2. 小白开学Asp.Net Core 《五》

    小白开学Asp.Net Core<五>                               —— 使用.Net Core MVC Filter 一.简介 今天在项目(https:/ ...

  3. 小白开学Asp.Net Core 《六》

    小白开学Asp.Net Core <六> —— 探究.Net Core 跨平台的奥秘 1.写这篇文章的初衷 有好多朋友反馈看不懂我写的开源的一个练手项目(GitHub:https://gi ...

  4. 小白开学Asp.Net Core 《七》

    小白开学Asp.Net Core <七> — — 探究中间件(MiddleWare) 1.何为中间件? 中间件是组装到应用程序管道中以处理请求和响应的家伙,管道中的每个组件都要满足以下两个 ...

  5. 小白开学Asp.Net Core《三》

    小白开学Asp.Net Core<三> ——界面 我胡汉三再次又回来了(距离上篇时间有点长),今天抽时间将最近对框架采用的后台界面做个记录 1.先上图 (图一) (图二) 2.界面说明 后 ...

  6. 小白开学Asp.Net Core《二》(补)

    小白开学Asp.Net Core<二>(补) ——数据仓储层(Repositroy).服务层(Service) -------------------------------------- ...

  7. 小白开学Asp.Net Core《二》

    小白开学Asp.Net Core<二> ——数据仓储层(Repositroy) 一.历史现象 在后端开发中,数据库操作是最频繁的,每一个开发人员都会接触,甚至不少开发人员每天的工作就是与数 ...

  8. 小白开学Asp.Net Core 《十》

    小白开学Asp.Net Core <十> — — Session.Cookie.Cache(老生常谈) 一.背景 在常谈Session和Cookie之前我们先来简单的了解下Http(可以说 ...

  9. 小白开学Asp.Net Core 《八》

    小白开学Asp.Net Core <八> — — .Net Core 数据保护组件 1.背景 我在搞(https://github.com/AjuPrince/Aju.Carefree)这 ...

随机推荐

  1. 开源中国的 IT 公司开源软件整理计划介绍

    直击现场 <HTML开发MacOSApp教程>  http://pan.baidu.com/s/1jG1Q58M 开源中国的 IT 公司开源软件整理计划介绍 oschina 发布于: 20 ...

  2. c#与JAVA利用SOCKET实现异步通信的SanNiuSignal.DLL已开源

    大家好,前段时间C#的SanNiuSignal.DLL已开源;因部分用户特需要JAVA版的SanNiuSignal;现在只能把半成品先拿出来暂时给他们用了,以后再慢慢改进; JAVA版目前已实现跟C# ...

  3. Java开发桌面程序学习(九)——JavaFxTemplate JavaFx模版 更简单进行JavaFx程序开发

    JavaFxTemplate 使用说明 项目基于maven,请确保maven配置成功,否则,可能会出现问题 项目内置了commons-io的jar包,Jfoenix的jar包以及常用的工具类JFxUt ...

  4. Python基础,day1

    一. Python介绍 目前Python主要应用领域: 云计算: 云计算最火的语言, 典型应用OpenStack WEB开发: 众多优秀的WEB框架,众多大型网站均为Python开发,Youtube, ...

  5. 分布式数据库中间件 MyCat 搞起来!

    关于 MyCat 的铺垫文章已经写了三篇了: MySQL 只能做小项目?松哥要说几句公道话! 北冥有 Data,其名为鲲,鲲之大,一个 MySQL 放不下! What?Tomcat 竟然也算中间件? ...

  6. 一步到位安装Centos7、配置VMware、连接Xshell

    1.创建虚拟机 1.0 创建新的虚拟机 1.0.1 选择自定义配置 打开VMware,点击创建新的虚拟机. 如下图所示:   1.0.2 选择虚拟机硬件兼容性 如下图所示:   1.0.3 安装客户操 ...

  7. 【React】react学习笔记01-概念与基本使用

      俺为啥要学这玩意:   家里的杂事好不容易处理完了,开始正式静下心来学习~博主是做后端开发的,js基础不深,之前也是用React写过许多东西了,但是基本上都是用的CV大法,别人的组 件修修改改拿来 ...

  8. css之vw布局

    vw,vh是视口单位,是相对视口单位,与百分百布局不一样的是,百分百是相对于父及元素,而vw布局是相对与窗口. 而rem布局是要与js一起配合 // 以iphone6设计稿 @function px2 ...

  9. K2工作流引擎Demo

    ---恢复内容开始--- 以前的工作都是电商网站形式的,从未接触过工作流相关工作,新公司是传统制造业行业,我进的这个组又是做工作流这块相关工作的,所以避免不了和工作流打交道. 这边工作流主要用K2来做 ...

  10. django基础知识之模板继承:

    模板继承 模板继承可以减少页面内容的重复定义,实现页面内容的重用 典型应用:网站的头部.尾部是一样的,这些内容可以定义在父模板中,子模板不需要重复定义 block标签:在父模板中预留区域,在子模板中填 ...