bootstrap-treeview 案例。


<!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>

增删改查 案例。

 

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值