| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279 |
- <!DOCTYPE html>
- <html>
- <!-- Mirrored from www.zi-han.net/theme/hplus/tree_view.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:19:58 GMT -->
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>质检管理</title>
- <link href="./css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
- <link href="./css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
- <link href="./css/animate.min.css" rel="stylesheet">
- <link href="./css/style.min862f.css?v=4.1.0" rel="stylesheet">
- <link href="./css/bootstrap-treeview.css" rel="stylesheet">
- <link rel="stylesheet" href="./css/layer/skin/default/layer.css" />
- <style>
- .form-control {
- width: 30%;
- display: -webkit-inline-box;
- }
- * {
- outline: none;
- }
- .btn:focus{
- outline: 0;
- }
- .layui-layer-title{
- background-color: #f0ad4e;
- }
- .form{
- margin: auto;
- }
- .form .formTitle {
- position: relative;
- left: 0px;
- text-align: right;
- white-space: nowrap;
- font-weight: normal;
- width: 90px;
- padding-right: 15px;
- }
- .form .formValue input.form-control {
- height: 30px;
- line-height: 30px;
- padding-top: 0px;
- padding-bottom: 0px;
- padding-right: 0px;
- padding-left: 5px;
- resize: none;
- border-radius: 0px;
- box-shadow: none;
- }
- .form-control {
- display: block;
- height: 34px;
- padding: 6px 12px;
- line-height: 1.42857143;
- color: #555;
- background-color: #fff;
- background-image: none;
- border: 1px solid #ddd;
- border-radius: 4px;
- -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
- box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
- -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
- -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
- transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
- display: -webkit-inline-box;
- }
- .form .formValue {
- position: relative;
- padding: 5px;
- width: auto;
- width:100%;
- }
- #F_OrganizeId{
- width:100%;
- }
- #F_FullName{
- width:100%;
- }
- .ibox-title{
- position: relative;
- }
- .ibox-titles{
- background-color: #fff;
- border-color: #e7eaec;
- -webkit-border-image: none;
- -o-border-image: none;
- border-image: none;
- border-style: solid solid none;
- border-width: 4px 0 0;
- color: inherit;
- margin-bottom: 0;
- padding: 14px 15px 7px;
- min-height: 48px;
- position: absolute;
- /*width: 100%;*/
- top:-4px;
- left: 0;
- display: none;
- }
- .ibox-toolss{
- display: inline-block;
- float: left;
- margin-top: 0;
- position: relative;
- padding: 0;
- }
- .btn_box{
- display: block;
- /*margin: auto;*/
- text-align: center;
- margin-top: 15px;
- }
- </style>
- </head>
- <body class="gray-bg">
- <div class="row wrapper wrapper-content animated fadeInRight">
- <div class="col-sm-12">
- <div class="ibox float-e-margins">
- <div class="ibox-title">
- <input type="text" class="form-control input-sm m-b-xs " id="filter" placeholder="搜索">
- <div class="ibox-tools">
- <button class="btn btn-warning ">
- <i class="glyphicon glyphicon-refresh"></i>
- </button>
- <button class=" btn btn-warning add">
- <i class="glyphicon glyphicon-plus "></i>增加</button>
- </div>
- <div class="ibox-titles">
- <div class="ibox-toolss">
- <a class="btn btn-link">
- <i class="glyphicon glyphicon-pencil amend">修改</i>
- </a>
- <a class=" btn btn-link move">
- <i class="glyphicon glyphicon-trash"></i>删除</a>
- </div>
- <div class="ibox-tools">
- <a class=" btn btn-link remove">
- <i class="glyphicon glyphicon-remove"></i>
- </a>
- </div>
- </div>
- </div>
-
- <div class="ibox-content">
- <div id="treeview1" class="test">
- <ul class="list-group"><li class="list-group-item node-treeview1 node-selected" data-nodeid="0" style="color:#FFFFFF;background-color:#428bca;"><span class="icon"><i class="click-collapse glyphicon glyphicon-minus"></i></span><span class="icon"><i class="glyphicon glyphicon-stop"></i></span>服务亲和力<span class="badge">25</span></li><li class="list-group-item node-treeview1" data-nodeid="1" style=""><span class="indent"></span><span class="icon"><i class="click-expand glyphicon glyphicon-plus"></i></span><span class="icon"><i class="glyphicon glyphicon-stop"></i></span>语音语调<span class="badge">9</span></li><li class="list-group-item node-treeview1" data-nodeid="2" style=""><span class="indent"></span><span class="icon"><i class="glyphicon"></i></span><span class="icon"><i class="glyphicon glyphicon-stop"></i></span>服务态度<span class="badge">7</span></li><li class="list-group-item node-treeview1" data-nodeid="3" style=""><span class="indent"></span><span class="icon"><i class="glyphicon"></i></span><span class="icon"><i class="glyphicon glyphicon-stop"></i></span>规范用语<span class="badge">9</span></li><li class="list-group-item node-treeview1" data-nodeid="4" style=""><span class="icon"><i class="click-collapse glyphicon glyphicon-minus"></i></span><span class="icon"><i class="glyphicon glyphicon-stop"></i></span>沟通技巧<span class="badge">0</span></li><li class="list-group-item node-treeview1" data-nodeid="5" style=""><span class="indent"></span><span class="icon"><i class="glyphicon"></i></span><span class="icon"><i class="glyphicon glyphicon-stop"></i></span>倾听技巧<span class="badge">2</span></li><li class="list-group-item node-treeview1" data-nodeid="6" style=""><span class="indent"></span><span class="icon"><i class="glyphicon"></i></span><span class="icon"><i class="glyphicon glyphicon-stop"></i></span>确认信息<span class="badge">0</span></li><li class="list-group-item node-treeview1" data-nodeid="7" style=""><span class="indent"></span><span class="icon"><i class="glyphicon"></i></span><span class="icon"><i class="glyphicon glyphicon-stop"></i></span>规语言技巧<span class="badge">0</span></li><li class="list-group-item node-treeview1" data-nodeid="8" style=""><span class="icon"><i class="click-collapse glyphicon glyphicon-minus"></i></span><span class="icon"><i class="glyphicon glyphicon-stop"></i></span>在线处理<span class="badge">0</span></li><li class="list-group-item node-treeview1" data-nodeid="9" style=""><span class="indent"></span><span class="icon"><i class="glyphicon"></i></span><span class="icon"><i class="glyphicon glyphicon-stop"></i></span>业务知识<span class="badge">2</span></li><li class="list-group-item node-treeview1" data-nodeid="10" style=""><span class="indent"></span><span class="icon"><i class="glyphicon"></i></span><span class="icon"><i class="glyphicon glyphicon-stop"></i></span>业务流程<span class="badge">0</span></li></ul>
- </div>
- </div>
- </div>
- </div>
- </div>
- <script src="./js/jquery.min.js?v=2.1.4"></script>
- <script src="./js/bootstrap.min.js?v=3.3.6"></script>
- <script src="./js/content.min.js?v=1.0.0"></script>
- <script src="./js/bootstrap-treeview.js"></script>
- <script src="./js/treeview-demo.min.js"></script>
- <script src="./css/layer/layer.js"></script>
- <script>
- //增加弹出框
- // $(".add").on("click",function(){
- //
- // })
- $(document).ready(function(){
- $(".gohome").hide();
- var flag=true;
- //添加
- $(".add").on("click",function(){
- if (!flag) {
- return false;
- console.log(flag);
- }
- layer.open({
- type: 1,
- title: '添加分类',
- area: ['400px', '260px'],
- shadeClose: true, //点击遮罩关闭
- content: '<div style="padding:20px;"><table class="form">'+
- '<tbody><tr>'+
- '<th class="formTitle">所属分类</th>'+
- '<td class="formValue">'+
- '<select id="F_OrganizeId" name="F_OrganizeId" class="form-control required select2-hidden-accessible" tabindex="-1" aria-hidden="true">'+
- '<option value="">服务亲和力</option><option value="">沟通技巧</option><option value="">在线处理</option>'+
- '</td>'+
- '</tr>'+
- '<tr>'+
- '<th class="formTitle">分类名称</th>'+
- '<td class="formValue">'+
- '<input id="F_FullName" name="F_FullName" type="text" class="form-control required" >'+
- '</td>'+
- '</tr> '+
- '</tbody>'+
- '</table>'+
- '<button class="btn btn-info">确认</button>'+
- '<button class="btn btn-danger">取消</button>'+
- '</div>'
- });
- });
- //提示删除
- $("#treeview1").on("click",".list-group-item",function(){//
- if (!flag) {
- return false;
- console.log(flag);
- }
- //删除不了
- // layer.confirm('您确定要删除此选项?', {
- // btn: ['是','否'] //按钮
- // }, function(){
- // console.log($(_this));//这里this变了
- // $(_this).remove();
- // layer.msg('已删除', {icon: 1});
- // }, function(){
- // layer.msg('已取消', { icon: 2});
- // });
- //修改
- // $(".amend").on("click",function(){
- // layer.open({
- // type: 1,
- // title: '修改信息',
- // area: ['400px', '260px'],
- // shadeClose: true, //点击遮罩关闭
- // content: '<div style="padding:20px;"><table class="form">'+
- // '<tbody><tr>'+
- // '<th class="formTitle">所属分类</th>'+
- // '<td class="formValue">'+
- // '<select id="F_OrganizeId" name="F_OrganizeId" class="form-control required select2-hidden-accessible" tabindex="-1" aria-hidden="true">'+
- // '<option value="">服务亲和力</option><option value="">沟通技巧</option><option value="">在线处理</option>'+
- // '</td>'+
- // '</tr>'+
- // '<tr>'+
- // '<th class="formTitle">分类名称</th>'+
- // '<td class="formValue">'+
- // '<input id="F_FullName" name="F_FullName" type="text" class="form-control required" >'+
- // '</td>'+
- // '</tr> '+
- // '</tbody>'+
- // '</table>'+
- // '<button class="btn btn-info">确认</button>'+
- // '<button class="btn btn-danger">取消</button>'+
- // '</div>'
- //
- // });
- // //点击修改
- // $(".btn-info").on("click",function(){
- // _this.text("51656");
- // console.log(_this.text());
- // })
- // })
- _html=$("#F_FullName").val();
- // $(".ibox-titles").show();
- // $(".ibox-titles").animate({width:"100%"});
-
- });
- $(".remove").on("click",function(){
- $(".ibox-titles").animate({width:"0%"});
- setTimeout(function(){//定时器
- $(".ibox-titles").hide();
- },
- 300);
- })
-
-
- });
-
- </script>
- </body>
- <!-- Mirrored from www.zi-han.net/theme/hplus/tree_view.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:19:59 GMT -->
- </html>
|