JS——学习宝典

7、jstree文件树实例代码

//前台代码
//css样式
<link rel="stylesheet" href="{{ URL::asset('plugins/jstree/themes/default/style.css') }}"/>
    <style>

        .finance-list {
            height: 570px;
            overflow: auto;
        }

        .prjboxleft {
            border-right: 1px solid #d5d5d5;
            height: 500px;
            overflow: auto;
        }
        #search_ay {
            position: relative;
            left: 10px;
            width: 100%;
        }

    </style>

//html代码
<div class="card-body finance-list">
        <div class="card-title">
            <i class="fas fa-list"></i>
            管理台账
        </div>
        <div class="row">
            <div class="col-2 prjboxleft">
                <!-- 搜索框 -->
                <div class="search_input" style=" position: -webkit-sticky; /* Safari */position: sticky;top: 0;">
                    <input type="text" id="search_ay" placeholder="搜索"/>
                </div>
                @if(count($treeData)>0)
                    <div id="jstree">
                        @foreach($treeData as $project)
                            <ul>
                                <li data-url="{{route('GLReportReport2',['guid'=>$project['prj_guid']])}}" id="PKG_{{$project['prj_guid']}}">
                                    <a href="#">{{$project['prjname']}}</a>
                                </li>
                            </ul>
                        @endforeach
                    </div>
                @else
                    <p class="mt-2">当前无项目信息</p>
                @endif

            </div>
            <div class="col-10">
                <iframe id="myiframe" name="myiframe" src=""
                        style="height: 100%; visibility: inherit; width: 100%;"
                        scrolling="yes" frameborder="0"></iframe>
            </div>
        </div>
    </div>
//js
<script src="{{ URL::asset('plugins/jstree/jstree.js') }}"></script>
    <script src="{{ URL::asset('plugins/jstree/jstree.search.js') }}"></script>
    <script>

        $(document).ready(function (e) {
            var index = 0;//默认浮层标识符 layer

            //jstree初始化
            $('#jstree').jstree({
                "plugins": ["search"]
            });

            //点击项目切换
            $('#jstree').on("changed.jstree", function (e, data) {
                index = layer.load(2, {shade: false}); //0代表加载的风格，支持0-2
                var src = data.node.data.url;
                $("#myiframe").attr("src", src);
            });

            //iframe 加载
            var iframe = document.getElementById("myiframe");
            iframe.height=document.documentElement.clientHeight;
            if (iframe.attachEvent) {
                iframe.attachEvent("onload", function () {
                    //iframe加载完成后你需要进行的操作
                    layer.close(index);
                });
            } else {
                iframe.onload = function () {
                    //iframe加载完成后你需要进行的操作
                    layer.close(index);
                };
            }
        });

        var to = false;
        $('#search_ay').keyup(function () {
            if (to) {
                clearTimeout(to);
            }

            to = setTimeout(function () {
                var searchResult = $("#jstree").jstree('search', $("#search_ay").val());
                $(searchResult).find('.jstree-search').focus();
                // var searchResult = $('#jstree').jstree(true).search($('#search_ay').val());
                //
                // $(searchResult).find('.jstree-search').focus()
            }, 250);
        });
    </script>

//PHP后台代码
 $treeData = [];

        //项目节点
        foreach ($prjLists as $prjList) {
            //先把项目添加进去
            $treeData[$prjList->prj_guid] = [
                'prjname' => $prjList->prjname,
                'prj_guid' => $prjList->prj_guid,
                'assettype' => $prjList->assettype,
            ];
        }

        return $treeData;

6、获取多个选中复选框的值

<script>
        // 修改角色权限
        function SaveMight() {
            var array = [];
            $("input[type='checkbox']").each(function () {
                if ($(this).prop("checked")) {
                    array.push($(this).val());
                }
            });
            if (array.length === 0) {
                if (confirm('当前未选择任何权限，确定保存此设置吗？')) {
                    SaveAndFresh(array);
                }
            } else {
                SaveAndFresh(array);
            }
        }
</script>

5、页面跳转

//js刷新本页
location.reload();

//跳转到某条路由
window.location.href="{{route('roles.index')}}"

4、js控制复选框全选或不全选

<input type="checkbox" name = "preDelCheck">
<input type="checkbox" name = "preDelCheck">
<input type="checkbox" name = "preDelCheck">

<input type="button"  id="allChecked" value="全选/取消全选" onClick="selectAllDels()">


<script>
 //全选
        function selectAllDels()
        {

            var allCheckBoxs = document.getElementsByName("preDelCheck");
            var desc = document.getElementById("allChecked");
            var selectOrUnselect=false;
            for(var i = 0; i < allCheckBoxs.length; i ++ )
            {
                if(allCheckBoxs[i].checked){
                    selectOrUnselect=true;
                    break;
                }
            }
            if (selectOrUnselect)
            {
                _allUnchecked(allCheckBoxs);
            }else
            {
                _allchecked(allCheckBoxs);
            }
        }

        function _allchecked(allCheckBoxs){
            for(var i = 0; i < allCheckBoxs.length; i ++ )
            {
                allCheckBoxs[i].checked = true;
            }
        }

        function _allUnchecked(allCheckBoxs){
            for(var i = 0; i < allCheckBoxs.length; i ++ )
            {
                allCheckBoxs[i].checked = false;
            }
        }

</script>

3、阻止form表单提交，验证输入是否符合要求

<form action="{{ route('Roles.store')}}" method="post" onsubmit="return chpwd()">
                            <input name="_token" type="hidden" value="{{ csrf_token() }}"/>
                            <input name="role_guid" type="hidden" value="{{ $roles_guid }}"/>
                            <input name="core_guid" type="hidden" value="{{ $core_guid }}"/>
                            <div class="row">
                                <label style="padding-top: 3px;padding-left:15px;font-size: large;font-size:1.4em;" >请添加新角色：</label>
                                <div class="col-md-2"><input type="text" id="rname" name="rname" class="form-control" placeholder="角色名称"></div>
                                {{--<div class="col-md-2"><input type="text" name="systype" class="form-control" placeholder="类型"></div>--}}
                                <div class="col-md-2"><input type="text" name="description" class="form-control" placeholder="角色描述"></div>
                                <div class="col-md-2">
                                    <button type="submit"  class="btn btn-primary">添加角色</button>
                                </div>
                            </div>
                        </form>





<script>
        function chpwd() {

            var rname = $("#rname");

            if (rname.val() === "" || rname.val() === undefined) {
                alert("角色名称不能为空！");
                return false;
            }
            else
            {
                return true;
            }


        }
    </script>

2、点击事件发生时，弹出预设大小的新窗口

<script LANGUAGE="JavaScript">
        function openresult(){
            window.open ("{{route('zhidingopen')}}", 'newwindow',   'height=350,   width=400,   top=200,   left=700,   toolbar=no,   menubar=no,   scrollbars=no,   resizable=no,location=no,   status=no');
        }
    </script>

1、打开、加载页面时，自动转向某条路由

<script>
    window.location="{{route('RecommendImport')}}";
</script>

 

 

 

待补充。。。。。