bootstrap-table.js的父子表示例
投稿于 被查看 8123 次 评论：167
bootstrap-table.js的父子表示例
<!DOCTYPE html>
<html>
<head>
<title>水形势分析 | 水环境 | 地表水 | 区域指数 | </title>
<meta charset="utf-8">
<link href="content/css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="content/css/bootstrap/bootstrap-table.css" rel="stylesheet" />
<link href="content/css/bootstrap/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<link href="content/script/ztree/zTreeStyle.css" rel="stylesheet" />
<link href="content/css/base.css" rel="stylesheet" />
<!--私有-->
<link href="content/pages/SXSFX/regional_index.css" rel="stylesheet" />
<script src="content/script/jquery.min.js"></script>
<script src="content/script/ztree/jquery-migrate-1.2.1.js"></script><!--jquery-migrate用与jquery高低版本兼容 （此处用于树形）-->
<script src="content/script/angular.min.js"></script>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=f7e369601e7c9c1ab4115f42c6d5d41b"></script>
</head>
<body style="overflow: auto;">
<div class="container" ng-app="myApp" ng-controller="siteCtrl">
<div ng-show="loading" class="page-loading-overlay">
<div class="loader-2"></div>
</div>
<!--头部导航开始-->
<nav class="header navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">{{logo_title}}</span>
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button><img ng-src="{{logo_src}}" class="weblogo">
<a class="navbar-brand" href="#">{{logo_title}}<!--{{area_datapath}}--></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span>{{my_area}}</span><strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
<a href="javascript:void(0)" ng-click="select_area('hebei_province','全省','130000') ">全省</a>
</li>
<li class="divider">
</li>
<li ng-repeat="area in area_dropdown">
<a href="javascript:void(0)" id="{{area.adcode}}" ng-click="select_area(area.path,area.name,area.adcode)">{{area.name}}</a>
</li>
<input id="areaCode" hidden="hidden" />
</ul>
</li>
</ul>
<div class="move">
<div></div>
</div>
<ul class="nav navbar-nav navbar-right">
<li ng-repeat="x in s_topmenu">
<a id="{{ x.id}}" href="{{ x.url}}">{{ x.name}}</a>
</li>
<li class="dropdown username">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span style="border: 0; " class="glyphicon glyphicon-user"></span><br /><font id="username">{{username}}</font>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">修改密码</a>
</li>
<li class="divider">
</li>
<li>
<a href="login.html">安全退出</a>
</li>
</ul>
</li>
</ul>
</div>
<img class="title_bj" src="content/images/p-1.png">
</nav>
<!--头部导航结束pub_bigbox scroll-->
<div class="row clearfix" style="margin:0;padding-top:20px;">
<div class=" col-xs-12 col-sm-4 col-md-3 col-lg-2" style="position:static;">
<!--左侧导航-->
<div class="leftmenu map_l_m" style="">
<!--<ul>
<li ng-repeat="lm in leftmenu_leader_action">
<a href="{{ lm.url}}">{{lm.level1}}<i class="caret"></i></a>
<ul>
<li ng-repeat="m in lm.level1child"> <span><a href="{{ m.url}}">{{ m.name}}</a></span></li>
</ul>
</li>
</ul>-->
</div>
</div>
<!--右侧-->
<div class=" col-xs-12 col-sm-8 col-md-9 col-lg-10" ng-controller="leader_searchCtrl" style="padding-left: 0;">
<div class="row searchbox">
<div class="col-lg-4 col-md-6">
<div class="form-group">
<label class=" control-label">
开始日期：
</label>
<input class="form-control form_datetime input_ao" ng-model="StartSearch" type="text" value="" readonly="readonly">
</div>
</div>
<div class="col-lg-4 col-md-6 lg_txt_center md_txt_right">
<div class="form-group">
<label class="control-label">截至日期：</label>
<input class="form-control form_datetime input_ao" ng-model="EndSearch" type="text" value="" readonly="readonly">
</div>
</div>
<div class="col-lg-4 col-md-6 lg_txt_right">
<div class="form-group">
<label class=" control-label">行政区划：</label>
<div class="btn-group ">
<input value="" type="text" id="areaSearch" onclick="showMenu('areaSearch_drop');" class=" btn btn-default dropdown-toggle w200 input_ao" style="text-align:left;" />
<div class="dropdown-menu w200 scroll areaSearch_drop" style="display:none; max-height:450px">
<ul id="tree_area" class="ztree"></ul>
</div>
</div>
</div>
</div>
<!--<div class="col-lg-4 col-md-6 md_txt_right">
<div class="form-group">
<label class=" control-label">所辖河流：</label>
<div class="btn-group ">
<input value="" type="text" id="river_cut" onclick="showMenu('river_cut_drop');" class=" btn btn-default dropdown-toggle w200 input_ao" style="text-align:left;" />
<div class="dropdown-menu w200 scroll river_cut_drop" style="display:none;max-height:450px">
<ul id="treeriver" class="ztree"></ul>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 lg_txt_center">
<div class="form-group">
<label class=" control-label search">河长姓名：</label>
<input class="form-control input_ao" ng-model="NameSearch" type="text" value="" maxlength="6">
</div>
</div>
<div class="col-lg-4 col-md-6 lg_txt_right md_txt_right">
<div class="form-group">
<label class=" control-label">河长级别：</label>
<div class="btn-group ">
<button type="button" ng-model="RoleTitle" class=" btn btn-default dropdown-toggle w200 input_ao" data-toggle="dropdown" style="text-align:left;">
<span class="caret"></span>
{{RoleTitle}}
</button>
<ul class="dropdown-menu w200 text-left">
<li ng-click="actionsRole($index)" ng-repeat="x in RiverLevel">
<a>{{x.RoleTitle}}</a>
</li>
</ul>
</div>
</div>
</div>-->
</div>
<ul class="nav nav-tabs nav-tab1">
<li class="active" data-toggle="tooltip" data-placement="top" title="列表">
<a href="#panel-761446" data-toggle="tab"><i class="glyphicon glyphicon-th"></i></a>
</li>
<li data-toggle="tooltip" data-placement="top" title="统计">
<a href="#panel-768677" data-toggle="tab"><i class="glyphicon glyphicon-signal"></i></a>
</li>
<li class="pull-right">
<button type="button" ng-click="searchClear()" class="btn btn-primary btn-sm p28">
<span class="glyphicon glyphicon-remove"></span> 重置
</button>
<button type="button" ng-click="searchResult()" class="btn btn-primary btn-sm p28">
<span class="glyphicon glyphicon-search"></span> 查询
</button>
</li>
</ul>
<div class="tab-content p_top10">
<div class="tab-pane active" id="panel-761446">
<div class="goodsList th_line_heigth0">
<!--<table class="table table-hover fixed-table-container scrollTable" style="width: 100%; ">
<thead style="font-size:12px;">
<tr>
<th data-field="id" data-sortable="true">序号</th>
<th>巡河日期</th>
<th>所辖河流</th>
<th>河长姓名</th>
<th>河长级别</th>
<th>巡河时长（分钟）</th>
<th>巡河里程（km）</th>
<th>河段覆盖率（%）</th>
<th>巡河问题（个）</th>
<th>轨迹</th>
<th>日志</th>
</tr>
</thead>
<tbody class="Tbody">
<tr ng-repeat="r in searchlist ">
<td>{{$index+1}}</td>
<td>{{r.LogDate}}</td>
<td>{{r.RiverName}}</td>
<td>{{r.RealName}}</td>
<td>{{r.RoleTitle}}</td>
<td>{{r.RiverTime}}</td>
<td>{{r.PatrolLength}}</td>
<td>{{r.RiverCover}}</td>
<td>{{r.ProblemNum}}</td>
<td>
<a href='#' class='btn f_green f18 btn-xs rizhi' role='button' data-placement='top' title='轨迹' ng-click="actions($index)" data-toggle="modal" data-target="#myModal"><span class='glyphicon glyphicon-send'></span></a>
</td>
<td>
<a href='patrol_log_details.html?LogID={{r.LogID}}' class='btn f_green f18 btn-xs' role='button' data-toggle='tooltip' data-placement='top' title='日志'><span class='glyphicon glyphicon-list-alt'></span></a>
</td>
</tr>
</tbody>
</table>-->
<table id="tb_powerset" class="table table-hover fixed-table-container scrollTable" style="width: 100%; "></table>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
巡河摘要
</h4>
</div>
<div class="modal-body">
<table style="width:100%;">
<tr><td>巡河日期： {{searchlist[logIndex].LogDate}}</td><td>巡查河段： {{searchlist[logIndex].RiverName}}</td></tr>
<tr><td>开始时间： {{searchlist[logIndex].StartTime}}</td><td>结束时间： {{searchlist[logIndex].EndTime}}</td></tr>
<tr><td>巡河用时： {{searchlist[logIndex].RiverTime}} 分钟 </td><td>巡河里程： {{searchlist[logIndex].PatrolLength}} km</td></tr>
</table>
<div class="text-center p_top10">
<div id="trailMap" style="width:100%;height:400px" />
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</div>
</div>
<div class="tab-pane" id="panel-768677" style="border: 1px solid #506eb7;">
<!-- 统计 -->
<div class="row" style="margin: 0; padding: 0;">
<div class="col-md-9 total_right" id="patrol_echarts">
</div>
<div class="col-md-3 total_left">
<h4 class="" style="margin-bottom:20px;">巡河绩效统计</h4>
<div>
<div class=""><label>累计巡河：</label><span class="f_green">{{SumNum}} </span> 次</div>
<div class=""><label>涉及河段：</label><span class="f_green">{{RiverNum}}</span> 条</div>
<div class=""><label>巡河时长：</label><span class="f_green">{{SumTime}}</span> 分钟</div>
<div class=""><label>平均时长：</label><span class="f_green">{{AvgTime}}</span> 分钟</div>
<div class=""><label>巡河里程：</label><span class="f_green">{{PatrolLength}}</span> 公里</div>
<div class=""><label>河段覆盖率：</label><span class="f_green">{{RiverCover}}</span> %</div>
</div>
</div>
</div>
<div class="row" style="border-top:1px dashed #506eb7;margin:0;padding:0;">
<div class="col-md-9 total_right" id="ask_echarts">
</div>
<div class=" col-md-3 total_left">
<h4 class="" style="margin-bottom:20px;">巡河问题统计</h4>
<div>
<div><label>累计上报问题：</label><span class="f_green">{{ProblemSum}} </span> 项</div>
<div><label>涉及河段：</label><span class="f_green">{{RiverSum}}</span> 条</div>
<div><label>办结问题：</label><span class="f_green">{{HandleSum}}</span> 项</div>
<div><label>问题办结率：</label><span class="f_green">{{HandleRate}}</span> %</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="content/script/bootstrap/bootstrap.min.js"></script>
<script src="content/script/bootstrap/bootstrap-table.js"></script>
<!--<script src="content/script/bootstrap/bootstrap-table-resizable.js"></script>-->
<script src="content/plugins/zTree/js/jquery.ztree.core.js"></script>
<script src="content/plugins/zTree/js/jquery.ztree.excheck.js"></script>
<script src="content/script/set_data.js"></script>
<script src="content/script/base.js"></script>
<script src="content/script/bootstrap/bootstrap-datetimepicker.js"></script>
<script src="content/script/bootstrap/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="content/script/bootstrap/bootstrap-treeview.js"></script>
<script src="content/script/echarts/echarts.min.js"></script>
<script src="content/script/water_situation_analysis_controller.js"></script>
<script>
$(function () {
$("#m3").addClass("active");
//-------- -------------------------datetimepicker-----------------gegin--------------------------------
$(".form_datetime").datetimepicker({
language: 'zh-CN',//设置中文，需要有中文js包
format: 'yyyy-mm-dd',//显示格式
todayHighlight: 1,//今天高亮
minView: "month",//设置只显示到月份
startView: 2,
forceParse: 0,
showMeridian: 1,
autoclose: 1//选择后自动关闭
});
});
</script>
<!--表格初始化 父子表-->
<script>
var oInit = new Object();
$("#tb_powerset").bootstrapTable({
url: '/content/data/XTBG/sjsb/dbs/teble.txt',
method: 'get',
detailView: true,//父子表
//sidePagination: "server",
pageSize: 10,
pageList: [10, 25],
columns: [{
field: 'id',
title: 'id'
}, {
field: 'name',
title: 'name'
}, {
field: 'type',
title: 'type'
}, {
field: 'state',
title: 'state'
}
],
//注册加载子表的事件。注意下这里的三个参数！
onExpandRow: function (index, row, $detail) {
oInit.InitSubTable(index, row, $detail);
}
});
//初始化子表格(无线循环)
oInit.InitSubTable = function (index, row, $detail) {
var parentid = row.MENU_ID;
var cur_table = $detail.html('<table></table>').find('table');
$(cur_table).bootstrapTable({
url: '/content/data/XTBG/sjsb/dbs/teble.txt',
method: 'get',
queryParams: { strParentID: parentid },
ajaxOptions: { strParentID: parentid },
clickToSelect: true,
detailView: false,//父子表
uniqueId: "MENU_ID",
pageSize: 10,
pageList: [10, 25],
columns: [{
checkbox: true
}, {
field: 'id',
title: 'id'
}, {
field: 'name',
title: 'name'
}, {
field: 'type',
title: 'type'
}, {
field: 'state',
title: 'state'
}],
//无线循环取子表，直到子表里面没有记录
onExpandRow: function (index, row, $Subdetail) {
oInit.InitSubTable(index, row, $Subdetail);
}
});
};
</script>
</body>
</html>
[
{
"id": 1,
"name": "地表水大羊沟",
"type": "河流",
"state": "已通过",
"ph": 0.6
},
{
"id": 2,
"name": "大羊沟",
"type": "湖泊",
"state": "未申报",
"ph": 0.6
},
{
"id": 3,
"name": "这是地表水",
"type": "河流",
"state": "审核中",
"ph": 0.6
},
{
"id": 4,
"name": "大羊沟",
"type": "河流",
"state": "未申报",
"ph": 0.6
},
{
"id": 5,
"name": "大羊沟",
"type": "河流",
"state": "审核中",
"ph": 0.6
},
{
"id": 6,
"name": "大羊沟",
"type": "河流",
"state": "已通过",
"ph": 0.6
},
{
"id": 7,
"name": "大羊沟",
"type": "湖泊",
"state": "未申报",
"ph": 0.6
},
{
"id": 8,
"name": "这是地表水",
"type": "河流",
"state": "审核中",
"ph": 0.6
},
{
"id": 9,
"name": "大羊沟",
"type": "河流",
"state": "未申报",
"ph": 0.6
},
{
"id": 10,
"name": "大羊沟",
"type": "河流",
"state": "审核中",
"ph": 0.6
},
{
"id": 11,
"name": "大羊沟",
"type": "河流",
"state": "已通过",
"ph": 0.6
},
{
"id": 12,
"name": "大羊沟",
"type": "湖泊",
"state": "未申报",
"ph": 0.6
},
{
"id": 13,
"name": "这是地表水",
"type": "河流",
"state": "审核中",
"ph": 0.6
},
{
"id": 14,
"name": "大羊沟",
"type": "河流",
"state": "未申报",
"ph": 0.6
},
{
"id": 15,
"name": "大羊沟",
"type": "河流",
"state": "审核中",
"ph": 0.6
},
{
"id": 16,
"name": "大羊沟",
"type": "河流",
"state": "已通过",
"ph": 0.6
},
{
"id": 17,
"name": "大羊沟",
"type": "湖泊",
"state": "未申报",
"ph": 0.6
},
{
"id": 18,
"name": "这是地表水",
"type": "河流",
"state": "审核中",
"ph": 0.6
},
{
"id": 19,
"name": "大羊沟",
"type": "河流",
"state": "未申报",
"ph": 0.6
},
{
"id": 20,
"name": "大羊沟",
"type": "河流",
"state": "审核中",
"ph": 0.6
},
{
"id": 21,
"name": "大羊沟",
"type": "河流",
"state": "已通过",
"ph": 0.6
},
{
"id": 22,
"name": "大羊沟",
"type": "湖泊",
"state": "未申报",
"ph": 0.6
},
{
"id": 23,
"name": "这是地表水",
"type": "河流",
"state": "审核中",
"ph": 0.6
},
{
"id": 24,
"name": "大羊沟",
"type": "河流",
"state": "未申报",
"ph": 0.6
},
{
"id": 25,
"name": "大羊沟",
"type": "河流",
"state": "审核中",
"ph": 0.6
}
]
用户评论