欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

bootstrap-treeview 案例。

程序员文章站 2022-06-08 10:44:55
...

<!DOCTYPE html>
<html>
<head >
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <style>
        .buttonclass {
            margin-right: 10px;
        }

      
    </style>
    <script>
        var cs = new SysService();
        var _id = "";
        var _index = 1;
        function add() {
            $("#ShowDialog").modal("show");
            _id = "0";
        }
        function addModel() {
            var node = $('#tree').treeview('getSelected');
            if (node.length == 0) {
                alert('请选择模块');
                return;
            }
            $('#parentModel2').val(node[0].modelname)
            $('#childModelName2').val("")
            $('#childDesc2').val("");
            $("#ShowDialog3").modal("show");


        }

        function edit() {
            var node = $('#tree').treeview('getSelected');

            if (node.length == 0) {
                alert('请选择模块');
                return;
            }
            $("#ShowDialog2").modal("show");
            if (node[0].level != '1') {
                $('#parentModel').val(node[0].parentModelName)
            } else {
                $('#parentModel').val("");
            }
            $('#childModelName').val(node[0].modelname)
            $('#childDesc').val(node[0].desc)

        }
        function updateChild() {
            var node = $('#tree').treeview('getSelected');
            var modelName = $('#childModelName').val();
            var projectId = $("#txtprojectId").val();

            if (modelName == "") {
                alert("模块名称不能为空!");
                return;
            }

            var items = [];
            items.push("modelName:\"" + modelName + "\"");
            items.push("projectId:\"" + projectId + "\"");
            items.push("descript:\"" + $('#childDesc').val() + "\"");
            items.push("id:\"" + node[0].id + "\"");

            var result = cs.ProjectModelSave("{" + items.join(",") + "}");
            result.success(function (data) {

                if (data > 0) {
                    alert("模块信息修改成功!");
                    if (node[0].level == 1) {
                        getTree(_index);
                    } else {
                        var newNode = {
                            text: modelName + "<span class='spanClass' style=' display:block;float:right;width:700px'> " + $('#childDesc').val() + "</span>",
                            id: node[0].id,
                            modelname: modelName,
                            desc: $('#childDesc').val(),
                        };
                        $('#tree').treeview('updateNode', [node, newNode]);
                    }
                    $("#ShowDialog2").modal("hide");
                }
                else {
                    alert("模块信息保存失败!");
                }
            });
            result.error(function () {
                alert('请求失败');
            });
        }
        function saveChild() {
            var node = $('#tree').treeview('getSelected');
            var modelName = $('#childModelName2').val();
            var projectId = $("#txtprojectId").val();

            if (modelName == "") {
                alert("模块名称不能为空!");
                return;
            }

            var items = [];
            items.push("modelName:\"" + modelName + "\"");
            items.push("projectId:\"" + projectId + "\"");
            items.push("descript:\"" + $('#childDesc2').val() + "\"");
            items.push("level:" + node[0].level + "");
            items.push("modelID:\"" + node[0].modelID + "\"");

            var result = cs.SaveProjectModelChild("{" + items.join(",") + "}");
            result.success(function (data) {

                if (data.Table.length > 0) {
                    alert("模块信息新增成功!");
                    var parentNode = $('#tree').treeview('getSelected');
                    var newNode = {
                        text: modelName + "<span class='spanClass' style=' display:block;float:right;width:700px'> " + $('#childDesc2').val() + "</span>",
                        id: data.Table[0].id,
                        modelname: modelName,
                        desc: $('#childDesc2').val(),
                        parentModelName: node[0].modelname
                    };
                    $('#tree').treeview('addNode', [newNode, parentNode]);
                    $("#ShowDialog3").modal("hide");
                }
                else {
                    alert("模块信息新增失败!");
                }
            });
            result.error(function () {
                alert('请求失败');
            });
        }
        function remove() {
            var node = $('#tree').treeview('getSelected');
            if (node.length == 0) {
                alert('请选择模块');
                return;
            }
            if (confirm("确定要删除当前选中模块吗?")) {
                var result = cs.DeleteInfong("projectModel", node[0].id);
                result.success(function (data) {
                    if (data > 0) {
                        alert("模块信息删除成功!");
                        //  GetList(_index);
                        if (node[0].level == 1) {
                            getTree(_index);
                        } else {
                            $('#tree').treeview('removeNode', [node, { silent: true }]);
                        }
                    }
                    else {
                        alert("模块信息删除失败!");
                    }
                });
                result.error(function () {
                    alert('请求失败');
                });
            }


        }

        function save() {
            var modelName = $("#modelName").val();
            var projectId = $("#txtprojectId").val();
            var descript = $("#descript").val();
            if (modelName == "") {
                alert("模块名称不能为空!");
                return;
            }

            var items = [];
            items.push("modelName:\"" + modelName + "\"");
            items.push("projectId:\"" + projectId + "\"");
            items.push("descript:\"" + descript + "\"");
            items.push("id:\"" + _id + "\"");
            var result = cs.ProjectModelSave("{" + items.join(",") + "}");
            result.success(function (data) {

                if (data > 0) {
                    alert("模块信息保存成功!");
                    getTree(_index);
                    $("#ShowDialog").modal("hide");
                }
                else {
                    alert("模块信息保存失败!");
                }
            });
            result.error(function () {
                alert('请求失败');
            });
        }
    </script>
</head>
<body class="container-fluid">
    <form id="form1" runat="server">
        <div class="row" style="padding-top: 8px; padding-left: 0px; padding-right: 0px;">
            <div class="row" style="margin: 0; padding-left: 16px; padding-right: 16px;">
                <ol id="bcList" class="breadcrumb" style="margin-bottom: 8px;"></ol>
            </div>
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                    <div class="x_title">
                        <h2>查询条件 <small></small></h2>
                        <ul class="nav navbar-right panel_toolbox">
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        <div class="row">
                            <div class="col-sm-1 col-right">模块名称</div>
                            <div class="col-sm-2 col-left">
                                <input class="form-control citem" id="txttemplateName" type="text" />
                            </div>
                            <div class="col-sm-1 col-right">项目名称</div>
                            <div class="col-sm-2 col-left">
                                <select id="txtprojectId" class="form-control" onchange="getTree(1);">
                                </select>
                            </div>
                            <div class="col-sm-3 col-left">
                                <input type="button" class="btn btn-primary" value=" 条件查询 " onclick="getTree(1);" />
                            </div>

                        </div>
                    </div>

                </div>
            </div>
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                    <div class="x_title">
                        <h2>模块设置<small></small></h2>
                        <ul class="nav navbar-right panel_toolbox">
                            <%--  <li><a href="javascript:void(0)" onclick="add();" title="新建模块"><i class="fa fa-plus"></i>新建模块
                            </a></li>--%>
                            <li>
                                <input id="btnAdd" class="btn btn-primary buttonclass" type="button" onclick="add();" value="添加主模块">
                            </li>
                            <li>
                                <input id="addChild" class="btn btn-primary buttonclass" type="button" onclick="addModel();" value="添加子模块">
                            </li>
                            <li>
                                <input id="btnMove" class="btn btn-success buttonclass" type="button" onclick="edit();" value="模块编辑"></li>
                            <li>
                                <input id="btnDel" class="btn btn-danger buttonclass" type="button" onclick="remove();" value="模块删除"></li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        <div id="tree" class="" style="height: 300px; overflow-y: auto; overflow-x: hidden">
                        </div>
                        <div class="fixed-table-pagination">
                            <div class="pull-left pagination-detail">
                                <span id="spanRefer" class="text-info"></span>
                            </div>
                            <div class="pull-right pagination">
                                <nav id="navPages">
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="ShowDialog" tabindex="-1" role="dialog" aria-labelledby="myModelLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="exampleModalLabel">模块新增</h4>
                    </div>
                    <div class="modal-body">
                        <%--    <div class="form-horizontal">
                            <div class="form-group">
                                <div class="col-right col-sm-3">
                                    <label>模块编号:</label>
                                </div>
                                <div class="col-sm-8" aria-disabled="true">
                                    <input type="text" id="projectModelId" class="form-control citema0" readonly="readonly" />
                                </div>
                            </div>
                        </div>--%>
                        <div class="form-horizontal">
                            <input type="hidden" id="id" />
                            <div class="form-group">
                                <div class="col-right col-sm-3">
                                    <label>模块名称:</label>
                                </div>
                                <div class="col-sm-8" aria-disabled="true">
                                    <input type="text" id="modelName" class="form-control citema0" autocomplete="off" />
                                </div>
                            </div>

                        </div>
                        <%--  <div class="form-horizontal">
                         <div class="form-group">
                                <div class="col-right col-sm-3">
                                    <label>所属公司:</label>
                                </div>
                                <div class="col-sm-8" aria-disabled="true" >
                                    <select id="companyId" class="form-control" onchange="LoadProjectList(this.value,this.id);"></select>
                                </div> 
                            </div>
                         </div>--%>
                        <%-- <div class="form-horizontal">
                            <div class="form-group">
                                <div class="col-right col-sm-3">
                                    <label>所属项目:</label>
                                </div>
                                <div class="col-sm-8" aria-disabled="true">
                                    <select id="projectId" class="form-control"></select>
                                </div>

                            </div>
                        </div>--%>
                        <div class="form-horizontal">
                            <div class="form-group">
                                <div class="col-right col-sm-3">
                                    <label>描述:</label>
                                </div>
                                <div class="col-sm-8" aria-disabled="true">
                                    <textarea id="descript" rows="4" class="form-control"></textarea>
                                </div>


                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <input type="button" id="btnSave" class="btn btn-primary" value="保存" onclick="save()" />
                        <input type="button" id="btnClose" class="btn btn-default" value="关闭" onclick="$('#ShowDialog').modal('hide')" />
                    </div>

                </div>
            </div>
        </div>
        <div class="modal fade" id="ShowDialog2" tabindex="-1" role="dialog" aria-labelledby="myModelLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="">模块编辑</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-horizontal">
                            <div class="form-group">
                                <div class="col-right col-sm-3">
                                    <label>上级模块名称:</label>
                                </div>
                                <div class="col-sm-8" aria-disabled="true">
                                    <input type="text" id="parentModel" class="form-control citema0" readonly="readonly" autocomplete="off" />
                                </div>

                            </div>
                        </div>
                        <div class="form-horizontal">

                            <div class="form-group">
                                <div class="col-right col-sm-3">
                                    <label>模块名称:</label>
                                </div>
                                <div class="col-sm-8" aria-disabled="true">
                                    <input type="text" id="childModelName" class="form-control citema0" autocomplete="off" />
                                </div>
                            </div>

                        </div>


                        <div class="form-horizontal">
                            <div class="form-group">
                                <div class="col-right col-sm-3">
                                    <label>描述:</label>
                                </div>
                                <div class="col-sm-8" aria-disabled="true">
                                    <textarea id="childDesc" rows="4" class="form-control"></textarea>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <input type="button" id=" " class="btn btn-primary" value="保存" onclick="updateChild()" />
                        <input type="button" class="btn btn-default" value="关闭" onclick="$('#ShowDialog2').modal('hide')" />
                    </div>

                </div>
            </div>
        </div>
        <div class="modal fade" id="ShowDialog3" tabindex="-1" role="dialog" aria-labelledby="myModelLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="">新增子模块</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-horizontal">
                            <div class="form-group">
                                <div class="col-right col-sm-3">
                                    <label>上级模块名称:</label>
                                </div>
                                <div class="col-sm-8" aria-disabled="true">
                                    <input type="text" id="parentModel2" class="form-control citema0" readonly="readonly" autocomplete="off" />
                                </div>

                            </div>
                        </div>
                        <div class="form-horizontal">

                            <div class="form-group">
                                <div class="col-right col-sm-3">
                                    <label>模块名称:</label>
                                </div>
                                <div class="col-sm-8" aria-disabled="true">
                                    <input type="text" id="childModelName2" class="form-control citema0" autocomplete="off" />
                                </div>
                            </div>

                        </div>


                        <div class="form-horizontal">
                            <div class="form-group">
                                <div class="col-right col-sm-3">
                                    <label>描述:</label>
                                </div>
                                <div class="col-sm-8" aria-disabled="true">
                                    <textarea id="childDesc2" rows="4" class="form-control"></textarea>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <input type="button" class="btn btn-primary" value="保存" onclick="saveChild()" />
                        <input type="button" class="btn btn-default" value="关闭" onclick="$('#ShowDialog3').modal('hide')" />
                    </div>

                </div>
            </div>
        </div>
        <script> 



            LoadProjectList(localStorage.companyId);

            setTimeout(function () {
                getTree(1);
            }, 500);
            var jsonData = [];
            //获取树数据
            function getTree(index) {
                _index = index;
                var items = [];
                var jsonList = [];
                jsonList.push("modelname:\"" + $('#txttemplateName').val() + "\"");
                var projectId = $('#txtprojectId').val();// "7CE73A3D64224D39";// == null ? 0 : $('#txtprojectId').val();
                jsonList.push("projectId:\"" + projectId + "\"");
                jsonList.push("companyid:\"" + localStorage.companyId + "\"");
                var data = '{Index:' + _index + ',PageSize:' + localStorage.PageSize + ',' + jsonList.join(',') + '}';
                var result = cs.GetProjectModelList(data);
                result.success(function (data) {
                    if (data.Table.length > 0) {
                        for (var i = 0; i < data.Table.length; i++) {
                            var desc = data.Table[i].descript.replace(/\n/g, ",")
                            // items.push("{text:\"" + data.Table[i].modelname    + "\",level:\"" + data.Table[i].modelLevel + "\",id:\"" + data.Table[i].id + "\",modelID:\""  + data.Table[i].projectModelId + "\",lazyLoad: true}");desc
                            items.push("{text:\" " + data.Table[i].modelname + "<span class='spanClass' style=' display:block;float:right;width:700px'> " + desc + "</span>\",modelname:\"" + data.Table[i].modelname + "\",id:\"" + data.Table[i].id + "\",modelID:\"" + data.Table[i].projectModelId + "\",desc:\"" + desc + "\",lazyLoad: true}");
                        }
                        jsonData = eval("[" + items.join(',') + "]");

                    } else {
                        jsonData = [{ id: 0, text: "" }];
                    }

                    onLoad();
                    var num = data.Table1[0].RecNum;
                    dividePage(localStorage.PageSize, index, num, "getTree", "");
                });
            }
            function onLoad() {
                $('#tree').treeview({
                    data: jsonData,
                    levels: 1,
                    showTags: true,
                    onNodeSelected: function (event, node) {
                        //   console.log(node.text + " " + node.id)
                        if (node.level == '3') {
                            $('#addChild').attr('disabled', 'true')
                        } else {
                            $('#addChild').removeAttr('disabled')
                        }

                    },
                    showCheckbox: false,//是否显示多选
                    lazyLoad: loaddata
                });
            }

            //事件注册
            function loaddata(node, func) {
                var singleNode = [];
                var items = [];
                func(singleNode);
                var jsonList = [];
                var projectID = $('#txtprojectId').val();// "7CE73A3D64224D39";//$('#txtprojectId').val(); // 这里改为动态获取;
                var projectmodelid = node.modelID;
                jsonList.push("projectid:\"" + projectID + "\",projectmodelid:\"" + projectmodelid + "\"");
                var data = '{ ' + jsonList.join(',') + '}';
                var result = cs.GetL1ProjectModel(data);
                result.success(function (data) {
                    if (data.Table.length > 0) {
                        for (var i = 0; i < data.Table.length; i++) {
                            var desc = data.Table[i].descript.replace(/\n/g, ",")
                            if (data.Table[i].modelLevel == '2') {
                                //items.push("{text:\"" + data.Table[i].modelname +"&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;"+ data.Table[i].descript + "\",modelname:\"" + data.Table[i].modelname + "\",desc:\"" + data.Table[i].descript + "\",parentModelName:\"" + data.Table[i].parentModelName + "\",id:\"" + data.Table[i].id + "\",modelID:\"" + data.Table[i].projectModelId + "\",lazyLoad: true}");

                                items.push("{text:\"" + data.Table[i].modelname + "<span class='spanClass' style=' display:block;float:right ;width:700px '> " + desc + "</span>\",modelname:\"" + data.Table[i].modelname + "\",desc:\"" + desc + "\",parentModelName:\"" + data.Table[i].parentModelName + "\",id:\"" + data.Table[i].id + "\",modelID:\"" + data.Table[i].projectModelId + "\",lazyLoad: true}");

                            } else {
                                items.push("{text:\"" + data.Table[i].modelname + "<span class='spanClass' style=' display:block;float:right ;width:700px '>" + desc + "</span>\",modelname:\"" + data.Table[i].modelname + "\",desc:\"" + desc + "\",parentModelName:\"" + data.Table[i].parentModelName + "\",id:\"" + data.Table[i].id + "\",modelID:\"" + data.Table[i].projectModelId + "\"}");
                            }

                        }
                        singleNode = eval("[" + items.join(',') + "]");
                    } else {
                        //  singleNode = [{ id: 0, text: "" }];
                    }
                    func(singleNode);
                });
            }


            $("#bcList").html(this.parent.getUrlPath(this.location.pathname));
        </script>
    </form>
</body>
</html>

增删改查 案例。