小白开学Asp.Net Core 《九》

小白开学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上查看。