- <div class="row clearfix tablePageMain">
- <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2" id="page_part_left"><!-- begin 左侧导航 -->
- <div class="leftmenu map_l_m">
- <ul id="ul_sjsb_leftmenu"> <li> <a data-type="lx" class="active"> 类型 <i class="caret" aria-hidden="true"></i></a> <ul> <li> <span class="active"><a data-type="dbs"> 地表水 </a></span></li> <li> <span class=""><a data-type="yys"> 饮用水 </a></span></li> <li> <span class=""><a data-type="jhhy"> 近海海域 </a></span></li> </ul> </li> </ul>
- </div>
- <!-- 左侧导航 模板 -->
- <textarea id="template_sjsb_leftmenu" class=""style="display: none;"> {#foreach $T as i}
- <li>
- <a data-type="{$T.i.type}">{$T.i.level1}<i class="caret" aria-hidden="true"></i></a>
- <ul>
- {#foreach $T.i.level1child as c}
- <li> <span><a data-type="{$T.c.type}">{$T.c.name}</a></span></li>
- {#/for}
- </ul>
- </li>
- {#/for}
- </textarea>
- <!-- end 左侧导航 --></div>
- <!-- 右侧 -->
- <div class="col-xs-12 col-sm-6 col-md-8 col-lg-10" id="page_part_right"><div class="row searchbox">
- <div class="col-lg-8 col-md-6">
- <div class="form-group">
- <label class="control-label">
- 日期:
- </label>
- <input class="form-control form_datetime input_ao" type="text" value="">
- </div>
- </div>
- <div class="col-lg-4 col-md-6 text-right">
- <button type="button" class="btn btn-primary btn-sm p28">
- 查询数据
- </button>
- <button type="button" class="btn btn-primary btn-sm p28">
- 下载模板
- </button>
- <button type="button" class="btn btn-primary btn-sm p28">
- 导入数据
- </button>
- </div>
- </div>
- <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 id="table_thead_tr"> <th> 操作 </th> <th> 类型 </th> <th> 名称 </th> <th> 状态 </th> <th>PH 值 </th></tr>
- </thead>
- <tbody class="Tbody" id="table_tbody_tr"><tr><td><a> 新增 </a></td><td> 河流 </td><td> 大羊沟 </td><td> 待审批 </td><td>0.6</td></tr><tr><td><a> 查看 </a></td><td> 我是地表水 </td><td> 大羊沟 </td><td> 通过 </td><td>0.3</td></tr></tbody>
- </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%;">
- <tbody><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>
- </tbody></table>
- <div class="text-center p_top10">
- <div id="trailMap" style="width:100%;height:400px"></div>
- </div>
- </div>
- </div><!-- /.modal-content -->
- </div><!-- /.modal -->
- </div>
- </div>
- </div>
- </div>
- </div>
- // 参数初始化
- var login = true;
- var pageType = "dbs";
- // 验证登录
- function LoadTF() {
- if (login == true) {
- // 登录信息为真, 则去除 loading 状态
- $("#loading").hide();
- }
- }
- $(document).ready(function () {
- // 载入头部导航
- $("#head").load("content/pages/base/head.html", function () {
- $("#m9").addClass("active");//set top menu hover
- });
- // 载入主页面
- $("#mainContents").load("content/pages/SJSB/main_contents.html", function () {
- // 验证登录信息
- LoadTF();
- // 加载 - 左侧导航
- $("#page_part_left").load("content/pages/SJSB/page_part_left.html", function () {
- // 初始化左侧导航内容模板
- var list_leftmenu = [
- {
- level1: "类型",
- type:"lx",
- level1child: [
- { name: '地表水', type:'dbs' },
- { name: '饮用水', type: 'yys' },
- { name: '近海海域', type: 'jhhy' }
- ]
- }
- ];;
- // 载入左侧导航数据
- $("#ul_sjsb_leftmenu").setTemplateElement("template_sjsb_leftmenu").processTemplate(list_leftmenu);
- // 设置左导航列表的当前页面状态 active
- pageTableLeftMenuActive(pageType);
- });
- // 加载右侧导航
- setRightContent(pageType);
- });
- });
- function setRightContent(thePageType) {
- // 加载 - 右侧内容
- $("#page_part_right").load("content/pages/SJSB/page_part_right.html", function () {
- // 载入表头数据
- var thJsonUrl = 'content/data/SJSB/' + thePageType + '/teble_th.txt';
- $.ajax({
- url: thJsonUrl,
- dataType: "json",
- async: true,// 异步 true 还是同步 false 默认是 true
- complete: function (jsondata, stat) {
- if (stat == "success") {
- //alert("success");
- var datasource = eval("(" + jsondata.responseText + ")");
- for (var i = 0;i <datasource.length; i++ ) {
- //alert(datasource[i].name);
- $("#table_thead_tr").append("<th>" + datasource[i].name + "</th>");
- }
- }
- else if (stat == "error") {
- alert("error");
- };
- }
- });
- // 载入表内数据
- var tdJsonUrl = 'content/data/SJSB/' + thePageType + '/teble_td.txt';
- $.ajax({
- url: tdJsonUrl,
- dataType: "json",
- async: true,// 异步 true 还是同步 false 默认是 true
- complete: function (jsondata, stat) {
- if (stat == "success") {
- //alert("success");
- var datasource = eval("(" + jsondata.responseText + ")");
- console.log(datasource);
- var stringTr = "", stringTd ="";
- $("#table_tbody_tr").html("");
- for (var i = 0; i <datasource.length; i++) {
- stringTd = "";
- for(var obj in datasource[i] )
- {
- console.log(datasource[i][obj]);
- stringTd += "<td>" + datasource[i][obj]+"</td>";
- }
- stringTr = "<tr>" + stringTd + "</tr>";
- $("#table_tbody_tr").append(stringTr);
- }
- }
- else if (stat == "error") {
- alert("error");
- };
- }
- });
- //// 日期插件
- $(".form_datetime").datetimepicker({
- format: 'yyyy-mm-dd',// 显示格式
- todayHighlight: 1,// 今天高亮
- minView: "month",// 设置只显示到月份
- startView: 2,
- forceParse: 0,
- showMeridian: 1,
- autoclose: 1// 选择后自动关闭
- });
- });
- }
- // 页面左导航当前选项
- var leftMenuActive;
- //---------------------------------left menu--------------------------------
- function pageTableLeftMenuActive(pageType) {
- //active 的移动
- $(".leftmenu> ul> li> ul> li> span").click(function () {
- $(".leftmenu> ul> li> ul> li> span").removeClass("active");
- $(this).addClass("active");
- leftMenuActive = $(this).children().data("type");
- // 重新加载右侧导航
- setRightContent(leftMenuActive);
- });
- $(".leftmenu> ul> li> a").click(function () {
- $(this).next().slideToggle();
- });
- $(".leftmenu li a").each(function () {
- if ($(this).attr("data-type") == pageType) {
- $(this).parent().addClass("active");
- $(this).parent().parent().parent().prev().addClass("active");
- return false;
- }
- });
- }
- [
- {
- "col1": "<a> 新增 </a>",
- "col2": "河流",
- "col3": "大羊沟",
- "col4": "待审批",
- "col5": 0.6
- },
- {
- "col1": "<a> 查看 </a>",
- "col2": "我是地表水",
- "col3": "大羊沟",
- "col4": "通过",
- "col5": 0.3
- }
- ]
来源: http://www.qdfuns.com/article/19533/7692e360013be3f394a55f27a42a7794.html