常用的Web插件使用

此篇文章只是对自己工作中用到的插件作为一个整理记录

1 bootstrap-table表格使用

这个我有两篇文章记录过,下面是链接
链接1
链接2

2 EasyUi中父子表(treegrid)

   //用户列表

            $("#treegrid1").treegrid({
                toolbar: '#toolbar',
                url: "@Url.Action("GetListByEasyUI")",
                title: '用户列表',
                idField: 'id',//标识id，
                treeField: 'name',

                rownumbers: true,
                animate: true,                    //开启动画
                fitColumns: true, //填充整个单元格
                resizable: true,

                columns: [[
                       { field: 'ck', checkbox: true },
                    { title: '部门名称', field: 'name', width: 200 },

          {
              title: '部门内码/用户内码', field: 'id', width: 300, hidden: true

          },
            {
                title: '编号', field: 'did', width: 40, hidden: true

            },
           {
               title: '部门内码', field: 'isOrang', width: 80, hidden: true

           }, {
               title: '状态', field: 'IsStatus', width: 80

           }

                ]],
                onClickRow: function (r, v) {   //点击一行时触发
                    if (r.isUser == true) {
                        //console.info($("#tbList").treegrid("getParent", {id:r.id}) );
                        console.info(r);

                        isdepeart = false;
                        UserArry = r;
                        GetRow = null;
                        return false;
                    }

                    UserArry = null;

                    if (r.isOrang && r.isUser == false) {   //点击组织
                        OrangId = r.id;
                        isdepeart = false;
                    }
                    if (r.isOrang == false && r.isUser == false) {  //点击部门
                        isdepeart = true;
                        OrangId = r.pid;
                        console.info($("#tbList").treegrid("getChildren"));

                    }
                    GetRow = r;



                    @*InitTree("leftTree", {}, "@Url.Action("GetUserByodID")", { orangID: r.pid, DepeartID: r.id }, 1);

            $("#smodule").html("当前部门：<strong style='color:red'>" + r.name + "</strong>");*@

                },
                onLoadSuccess: function () {//加载成功时触发
                    //设置子节点关闭
                    $('#tbList').treegrid('collapseAll');
                },
                onLoadError: function () {
                    layer.msg("加载数据失败!", {
                        icon: icon,//1 成功 2 失败 3 问号
                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                    });
                }


            });
//这里返回的数据格式为[{id:'',text:'',Children:[{}]}]这种形式

3 富头像编辑器

这里我以前也有写到过,下面是链接
富头像编辑器

4 ztree树形控件的使用

/**
首先加载ztree.js
然后再加载帮助类

*/
/*帮助类开始*/


/**
初始化树
$dom id或者class
options  初始化的配置
url 后台地址
data 需要传入的参数 {id:10}
check 是否有复选框 0 表示没有 1 表示有
*/
function InitTree($dom, options, url, data, check) {
    debugger;
    var ischeck;
    if (check == 1) {
        ischeck = true;
    } else {
        ischeck = false;
    }
    var nlayer = layer.msg('正在加载数据，请稍等！', {
        icon: 16,
        time: 0
    });


    var setting = {


        check:options.check|| {
            enable: ischeck,   //true / false 分别表示 显示 / 不显示 复选框或单选框
            autoCheckTrigger: true,   //true / false 分别表示 触发 / 不触发 事件回调函数
            chkStyle: "checkbox",   //勾选框类型(checkbox 或 radio）
            chkboxType: { "Y": "s","N":"s" }   //勾选 checkbox 对于父子节点的关联关系
        },


        view: {
            //  fontCss: getFontCss,
            dblClickExpand: false,
            showLine: true
        },
        data: {
            key: {
                title: "title"
            },
            simpleData: {
                enable: true,
                checked: true
            }
        },
        callback: {
            onClick: onClick
        }
    };

    setting = $.extend({}, setting, options)



    $.ajax({
        type: 'Get',
        url: url,
        dataType: "json", //可以是text，如果用text，返回的结果为字符串；如果需要json格式的，可是设置为json
        data:data,

        success: function (data) {
            layer.close(nlayer);
            //console.info(data);
            if (data.Type != undefined) {
                if (data.Type == 500) {

                    layer.msg("操作失败！", {
                        icon: 5,//1 成功 2 失败 3 问号
                        time: 3000 //2秒关闭（如果不配置，默认是3秒）
                    });
                } else {
                    debugger;
                    layer.msg(data.Msg, {
                        icon: 5,//1 成功 2 失败 3 问号 5 囧
                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                    });

                    if (data.Type == 498) {

                        $(window).attr('location', window.location.host + "/Account/Index");
                    }

                }



            } else {
                $.fn.zTree.init($("#" + $dom), setting, data);
            }




        },
        error: function (msg) {

            layer.msg("数据加载失败！");
        }
    });
}


    //下拉树菜单点击事件
        function onClick(e, treeId, treeNode) {
            console.info(treeNode);
            //这是单击节点展开
            var zTree = $.fn.zTree.getZTreeObj("leftTree");
            zTree.expandNode(treeNode);

            var kws = treeNode.name;
            var s = $.fn.zTree.getZTreeObj(treeId).getSelectedNodes()[0].isUser;

            console.info($.fn.zTree.getZTreeObj(treeId).getSelectedNodes()[0].IsAction);
            if (s == true) {
                IsUser = true;
                $("#smodule").html("当前用户：<strong style='color:red'>" + treeNode.name + "</strong>");
                UserID = treeNode.id;
                InitTree("moduleTree", setins, "@Url.Action("GetModuleBytree")", { Rid: Rid, uid: UserID }, 1);// GetModuleBytree
            } else {
                IsUser = false;
                UserID = null;
            }

        }

// 文本框获取焦点的颜色变化，我这里去掉了自动的搜索，使用enter建和搜索按钮才会搜索定位
function focusKey(e) {
    if (key.hasClass("empty")) {
        key.removeClass("empty");
    }
}
function blurKey(e) {
    if (key.get(0).value === "") {
        key.addClass("empty");
    }
}
//搜索节点，不使用模糊，使用全匹配，当然也可以使用节点ID，文字，模糊查询所有节点，也很简单，不做叙述，类似下面，只是调用方法不同
function searchNode(e) {
    var zTree = $.fn.zTree.getZTreeObj("leftTree");
    updateNodes(false);
    var value = $.trim(key.get(0).value);
    if (value != "") {
        var keyType = "name";
        nodeList = zTree.getNodesByParam(keyType, value);
        updateNodes(true);
    }

}
//更新节点，使其高亮显示，我这里自己加了展开节点，达到了定位的效果
function updateNodes(highlight, $dom) {
    var zTree = $.fn.zTree.getZTreeObj($dom);
    for (var i = 0, l = nodeList.length; i < l; i++) {
        nodeList[i].highlight = highlight;
        //定位到节点并展开
        zTree.expandNode(nodeList[i]);
        zTree.updateNode(nodeList[i]);
    }
}

//全选
function CheckAllNodes($dom) {
    var treeObj = $.fn.zTree.getZTreeObj($dom);
    treeObj.checkAllNodes(true);
}

//获取所有选中节点的值
function GetCheckedAll($dom) {
    var treeObj = $.fn.zTree.getZTreeObj($dom);
    var nodes = treeObj.getCheckedNodes(true);

    var arr = new Array();
    for (var i = 0; i < nodes.length; i++) {
        var s = { id: nodes[i].id, IsAction: nodes[i].IsAction || '', pid: nodes[i].pId, name: nodes[i].name, isparent: nodes[i].isParent, isenable: nodes[i].checked };
        arr.push(s);
    }
    console.info(arr);
    return arr;
}

//全取消
function CancelAllNodes($dom) {
    var treeObj = $.fn.zTree.getZTreeObj($dom);
    treeObj.checkAllNodes(false);
}


//获取所有节点
function GetAllNodes($dom) {
    var treeObj = $.fn.zTree.getZTreeObj($dom);
    var node = treeObj.getNodes();
    var nodes = treeObj.transformToArray(node);
    return nodes;

}

/*帮助类结束*/

/*初始化开始*/

    setins = {
                check: {
                    enable: true,   //true / false 分别表示 显示 / 不显示 复选框或单选框
                    autoCheckTrigger: true,   //true / false 分别表示 触发 / 不触发 事件回调函数
                    chkStyle: "checkbox",   //勾选框类型(checkbox 或 radio）
                    //chkboxType: { "Y": "ps","N":"p" }   //勾选 checkbox 对于父子节点的关联关系

                }

            };

  /*这里的第四个参数表示需要传到后台的值 形如{id:'',name:''} */
            InitTree("leftTree", setins, "@Url.Action("GetOrangAndDepeart")", null, 1);
/*初始化结束*/

/**
后台返回数据形式为 [{id:'',Children:[{id:'',name:''}]}]
*/

ztree加载数据后在设置选中的状态

• 首先,获取树控件中所有的节点

var treeObj = $.fn.zTree.getZTreeObj("gwTree");
var node = treeObj.getNodes();
var nodes = treeObj.transformToArray(node);

• 设置节点的属性

   //后台获取数据
$.getJSON("/Cultural/GetListByID?id=" + row.ID, function (data) {
     console.info(data);
     //遍历当前的数据,如果存在于树控件 中 
     for (var i = 0; i < data.role.length; i++) {
         var count = Enumerable.From(nodes).Where("p=>p.id==" + data.role[i].RoleID).Count();
           if (count > 0) {
            //根据id选择节点
            var selectnode = treeObj.getNodeByParam("id", data.role[i].RoleID);
             //设置树控件的状态为选中
              selectnode.checked = true;
             treeObj.selectNode(selectnode);
             //在刷新树节点  此方法不写将没有效果[至少我是这个情况]
             treeObj.updateNode(selectnode);
    }
    console.info(count);

   }
});

bootstrap-fileinput上传文件

/**
首先加载所有的js
然后再初始化

*/

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">

<link href="~/Scripts/libs/bootstrap-fileinput/css/fileinput.css" media="all" rel="stylesheet" />
 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css" />
 <link href="~/Scripts/libs/bootstrap-fileinput/themes/explorer-fa/theme.css" rel="stylesheet" />
 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>


    <script src="~/Scripts/libs/bootstrap-fileinput/js/plugins/sortable.js"></script>
    <script src="~/Scripts/libs/bootstrap-fileinput/js/fileinput.js"></script>
    <script src="~/Scripts/libs/bootstrap-fileinput/js/locales/zh.js"></script>
    <script src="~/Scripts/libs/bootstrap-fileinput/themes/explorer-fa/theme.js"></script>

 <script src="~/Scripts/libs/bootstrap-fileinput/themes/fa/theme.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" type="text/javascript"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" type="text/javascript"></script>


/*用一个容器来装载*/
 <div class="container kv-main">


        <form enctype="multipart/form-data">

            <div style="margin:20px 0;">
                请选择项目资料类型： <select class="form-control" style="width:25%" id="DataType"></select>
            </div>

            <div class="file-loading">
                <input id="file-fr" name="file-data" type="file" multiple>
            </div>

        </form>


        <div id="errorBlock">发生错误</div>
        <hr>
        <br>
    </div>

/*js初始化操作*/



            $('#file-fr').fileinput({
                theme: 'fa',
                language: 'zh',
                uploadUrl: '/Project/Upload',
                'elErrorContainer': '#errorBlock',
                msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
                //allowedFileExtensions: ['jpg', 'png', 'gif']
                overwriteInitial: false,
                //maxFileSize: 1000,
                maxFilesNum: 10,
              /*官方文档说这里是传入后台的参数 可是我这样写后台接受不到参数*/
                ajaxOperations: { DataType: RType },
                /*用这个方法后台能接受到参数*/
                uploadExtraData: function (previewId, index) {
                    var obj = {};
                    obj.DataType = RType;
                    console.log(obj);
                    return obj;
                }


            }).on('fileerror', function (event, data, msg) {
                alert("发生错误");

                console.log(data.id);
                console.log(data.index);
                console.log(data.file);
                console.log(data.reader);
                console.log(data.files);
                // get message
                alert(msg);
            }).on('filebatchuploaderror', function (event, data, msg) {
                alert("发生错误");
            }).on("fileuploaded", function (event, data, previewId, index) {


                $("#file-fr").fileinput('clear'); 

                console.info(event);
                console.info(data);

                console.info(JSON.parse(data.response));
                //console.info($.parseJSON(data.response));

                console.info(previewId);
                console.info(index);


            });

layer.msg("上传成功");
$(':file').filestyle('clear');   //上传成功 清除文件