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>