Light-Year-Admin-Template-v4
/
lyear_pages_data_table.html

<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V4是一个基于Bootstrap v4.4.1的后台管理系统的HTML模板。">
<meta name="author" content="yinq">
<title>表格插件 - 光年(Light Year Admin V4)后台管理系统模板</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="stylesheet" type="text/css" href="css/materialdesignicons.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/animate.min.css">
<link rel="stylesheet" type="text/css" href="js/bootstrap-table/bootstrap-table.min.css">
<link rel="stylesheet" type="text/css" href="js/jquery-confirm/jquery-confirm.min.css">
<link rel="stylesheet" type="text/css" href="css/style.min.css">
</head>

<body>
<!--页面loading-->
<div id="lyear-preloader" class="loading">
  <div class="ctn-preloader">
    <div class="round_spinner">
      <div class="spinner"></div>
      <img src="images/loading-logo.png" alt="">
    </div>
  </div>
</div>
<!--页面loading end-->
<div class="lyear-layout-web">
  <div class="lyear-layout-container">
    <!--左侧导航-->
    <aside class="lyear-layout-sidebar">

      <!-- logo -->
      <div id="logo" class="sidebar-header">
        <a href="index.html"><img src="images/logo-sidebar.png" title="LightYear" alt="LightYear" /></a>
      </div>
      <div class="lyear-layout-sidebar-info lyear-scroll">

        <nav class="sidebar-main">
          <ul class="nav-drawer">
            <li class="nav-item"> <a href="index.html"><i class="mdi mdi-home"></i> <span>后台首页</span></a> </li>
            <li class="nav-item nav-item-has-subnav">
              <a href="javascript:void(0)"><i class="mdi mdi-palette"></i> <span>UI 元素</span></a>
              <ul class="nav nav-subnav">
                <li> <a href="lyear_ui_typography.html">排版</a> </li>
                <li> <a href="lyear_ui_grid.html">栅格</a> </li>
                <li> <a href="lyear_ui_icon.html">图标</a> </li>
                <li> <a href="lyear_ui_alerts.html">警告框</a> </li>
                <li> <a href="lyear_ui_buttons.html">按钮</a> </li>
                <li> <a href="lyear_ui_button_group.html">按钮组</a> </li>
                <li> <a href="lyear_ui_cards.html">卡片</a> </li>
                <li> <a href="lyear_ui_tables.html">表格</a> </li>
                <li> <a href="lyear_ui_modal.html">模态框</a> </li>
                <li> <a href="lyear_ui_dropdown.html">下拉菜单</a> </li>
                <li> <a href="lyear_ui_tooltips.html">工具提示</a> </li>
                <li> <a href="lyear_ui_tabs.html">标签页</a> </li>
                <li> <a href="lyear_ui_pagination.html">分页</a> </li>
                <li> <a href="lyear_ui_popovers.html">POP提示</a> </li>
                <li> <a href="lyear_ui_images.html">图片</a> </li>
                <li> <a href="lyear_ui_badges.html">徽章</a> </li>
                <li> <a href="lyear_ui_progress.html">进度条</a> </li>
                <li> <a href="lyear_ui_list_group.html">列表组</a> </li>
                <li> <a href="lyear_ui_media_object.html">媒体对象</a> </li>
                <li> <a href="lyear_ui_navbar.html">导航栏</a> </li>
                <li> <a href="lyear_ui_scrollspy.html">滚动监听</a> </li>
                <li> <a href="lyear_ui_spinners.html">加载状态</a> </li>
                <li> <a href="lyear_ui_toasts.html">消息弹窗</a> </li>
                <li> <a href="lyear_ui_timeline.html">时光轴</a> </li>
                <li> <a href="lyear_ui_other.html">其他</a> </li>
              </ul>
            </li>
            <li class="nav-item nav-item-has-subnav">
              <a href="javascript:void(0)"><i class="mdi mdi-format-align-justify"></i> <span>表单</span></a>
              <ul class="nav nav-subnav">
                <li> <a href="lyear_forms_elements.html">基本元素</a> </li>
                <li> <a href="lyear_forms_input_group.html">输入框组</a> </li>
                <li> <a href="lyear_forms_radio.html">单选框</a> </li>
                <li> <a href="lyear_forms_checkbox.html">复选框</a> </li>
                <li> <a href="lyear_forms_switches.html">开关</a> </li>
                <li> <a href="lyear_forms_range.html">范围选择</a> </li>
              </ul>
            </li>
            <li class="nav-item nav-item-has-subnav">
              <a href="javascript:void(0)"><i class="mdi mdi-tools"></i> <span>工具类</span></a>
              <ul class="nav nav-subnav">
                <li> <a href="lyear_utilities_borders.html">边框</a> </li>
                <li> <a href="lyear_utilities_colors.html">颜色</a> </li>
                <li> <a href="lyear_utilities_display.html">显示属性</a> </li>
                <li> <a href="lyear_utilities_flex.html">弹性布局</a> </li>
                <li> <a href="lyear_utilities_float.html">浮动</a> </li>
                <li> <a href="lyear_utilities_sizing.html">尺寸</a> </li>
                <li> <a href="lyear_utilities_spacing.html">间隔</a> </li>
                <li> <a href="lyear_utilities_stretched_link.html">延伸链接</a> </li>
                <li> <a href="lyear_utilities_text.html">文本</a> </li>
                <li> <a href="lyear_utilities_other.html">其他</a> </li>
              </ul>
            </li>
            <li class="nav-item nav-item-has-subnav active open">
              <a href="javascript:void(0)"><i class="mdi mdi-file-outline"></i> <span>示例页面</span></a>
              <ul class="nav nav-subnav">
                <li> <a href="lyear_pages_doc.html">文档列表</a> </li>
                <li> <a href="lyear_pages_gallery.html">图库列表</a> </li>
                <li> <a href="lyear_pages_config.html">网站配置</a> </li>
                <li> <a href="lyear_pages_rabc.html">设置权限</a> </li>
                <li> <a href="lyear_pages_add_doc.html">新增文档</a> </li>
                <li> <a href="lyear_pages_guide.html">表单向导</a> </li>
                <li class="active"> <a href="lyear_pages_data_table.html">表格插件</a> </li>
                <li> <a href="lyear_pages_login_1.html" target="_blank">登录页面1</a> </li>
                <li> <a href="lyear_pages_login_2.html" target="_blank">登录页面2</a> </li>
                <li> <a href="lyear_pages_login_3.html" target="_blank">登录页面3</a> </li>
                <li> <a href="lyear_pages_login_4.html" target="_blank">登录页面4</a> </li>
                <li> <a href="lyear_pages_error.html" target="_blank">错误页面</a> </li>
              </ul>
            </li>
            <li class="nav-item nav-item-has-subnav">
              <a href="javascript:void(0)"><i class="mdi mdi-language-javascript"></i> <span>JS 插件</span></a>
              <ul class="nav nav-subnav">
                <li> <a href="lyear_js_datepicker.html">日期选取器</a> </li>
                <li> <a href="lyear_js_colorpicker.html">选色器</a> </li>
                <li> <a href="lyear_js_chartjs.html">Chart.js</a> </li>
                <li> <a href="lyear_js_jconfirm.html">对话框</a> </li>
                <li> <a href="lyear_js_tags_input.html">标签插件</a> </li>
                <li> <a href="lyear_js_notify.html">通知消息</a> </li>
                <li> <a href="lyear_js_maxlength.html">长度判断</a> </li>
                <li> <a href="lyear_js_select.html">下拉选择</a> </li>
                <li> <a href="lyear_js_fullcalendar.html">日程插件</a> </li>
                <li> <a href="lyear_js_loading.html">loading插件</a> </li>
              </ul>
            </li>
            <li class="nav-item nav-item-has-subnav">
              <a href="javascript:void(0)"><i class="mdi mdi-menu"></i> <span>多级菜单</span></a>
              <ul class="nav nav-subnav">
                <li> <a href="#!">一级菜单</a> </li>
                <li class="nav-item nav-item-has-subnav">
                  <a href="#!">一级菜单</a>
                  <ul class="nav nav-subnav">
                    <li> <a href="#!">二级菜单</a> </li>
                    <li class="nav-item nav-item-has-subnav">
                      <a href="#!">二级菜单</a>
                      <ul class="nav nav-subnav">
                        <li> <a href="#!">三级菜单</a> </li>
                        <li> <a href="#!">三级菜单</a> </li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li> <a href="#!">一级菜单</a> </li>
              </ul>
            </li>
          </ul>
        </nav>

        <div class="sidebar-footer">
          <p class="copyright">Copyright &copy; 2019. <a target="_blank" href="http://lyear.itshubao.com">IT书包</a> All rights reserved.</p>
        </div>
      </div>

    </aside>
    <!--End 左侧导航-->

    <!--头部信息-->
    <header class="lyear-layout-header">

      <nav class="navbar">

        <div class="navbar-left">
          <div class="lyear-aside-toggler">
            <span class="lyear-toggler-bar"></span>
            <span class="lyear-toggler-bar"></span>
            <span class="lyear-toggler-bar"></span>
          </div>
        </div>

        <ul class="navbar-right d-flex align-items-center">
          <li class="dropdown dropdown-notice">
            <span data-toggle="dropdown" class="icon-item">
              <i class="mdi mdi-bell-outline"></i>
              <span class="badge badge-danger">10</span>
            </span>
            <div class="dropdown-menu dropdown-menu-right">
              <div class="lyear-notifications">

                <div class="lyear-notifications-title clearfix"  data-stopPropagation="true"><a href="#!" class="float-right">查看全部</a>你有 10 条未读消息</div>
                <div class="lyear-notifications-info lyear-scroll">
                  <a href="#!" class="dropdown-item" title="树莓派销量猛增，疫情期间居家工作学习、医疗领域都需要它">树莓派销量猛增，疫情期间居家工作学习、医疗领域都需要它</a>
                  <a href="#!" class="dropdown-item" title="GNOME 用户体验团队将为 GNOME Shell 提供更多改进">GNOME 用户体验团队将为 GNOME Shell 提供更多改进</a>
                  <a href="#!" class="dropdown-item" title="Linux On iPhone 即将面世，支持 iOS 的双启动">Linux On iPhone 即将面世，支持 iOS 的双启动</a>
                  <a href="#!" class="dropdown-item" title="GitHub 私有仓库完全免费面向团队提供">GitHub 私有仓库完全免费面向团队提供</a>
                  <a href="#!" class="dropdown-item" title="Wasmtime 为 WebAssembly 增加 Go 语言绑定">Wasmtime 为 WebAssembly 增加 Go 语言绑定</a>
                  <a href="#!" class="dropdown-item" title="红帽借“订阅”成开源一哥，首创者 Cormier 升任总裁">红帽借“订阅”成开源一哥，首创者 Cormier 升任总裁</a>
                  <a href="#!" class="dropdown-item" title="Zend 宣布推出两项 PHP 新产品">Zend 宣布推出两项 PHP 新产品</a>
                </div>

              </div>
            </div>
          </li>
          <!--切换主题配色-->
		  <li class="dropdown dropdown-skin">
		    <span data-toggle="dropdown" class="icon-item"><i class="mdi mdi-palette"></i></span>
			<ul class="dropdown-menu dropdown-menu-right" data-stopPropagation="true">
              <li class="drop-title"><p>主题</p></li>
              <li class="drop-skin-li clearfix">
                <span class="inverse">
                  <input type="radio" name="site_theme" value="default" id="site_theme_1" checked>
                  <label for="site_theme_1"></label>
                </span>
                <span>
                  <input type="radio" name="site_theme" value="dark" id="site_theme_2">
                  <label for="site_theme_2"></label>
                </span>
                <span>
                  <input type="radio" name="site_theme" value="translucent" id="site_theme_3">
                  <label for="site_theme_3"></label>
                </span>
              </li>
			  <li class="drop-title"><p>LOGO</p></li>
			  <li class="drop-skin-li clearfix">
                <span class="inverse">
                  <input type="radio" name="logo_bg" value="default" id="logo_bg_1" checked>
                  <label for="logo_bg_1"></label>
                </span>
                <span>
                  <input type="radio" name="logo_bg" value="color_2" id="logo_bg_2">
                  <label for="logo_bg_2"></label>
                </span>
                <span>
                  <input type="radio" name="logo_bg" value="color_3" id="logo_bg_3">
                  <label for="logo_bg_3"></label>
                </span>
                <span>
                  <input type="radio" name="logo_bg" value="color_4" id="logo_bg_4">
                  <label for="logo_bg_4"></label>
                </span>
                <span>
                  <input type="radio" name="logo_bg" value="color_5" id="logo_bg_5">
                  <label for="logo_bg_5"></label>
                </span>
                <span>
                  <input type="radio" name="logo_bg" value="color_6" id="logo_bg_6">
                  <label for="logo_bg_6"></label>
                </span>
                <span>
                  <input type="radio" name="logo_bg" value="color_7" id="logo_bg_7">
                  <label for="logo_bg_7"></label>
                </span>
                <span>
                  <input type="radio" name="logo_bg" value="color_8" id="logo_bg_8">
                  <label for="logo_bg_8"></label>
                </span>
			  </li>
			  <li class="drop-title"><p>头部</p></li>
			  <li class="drop-skin-li clearfix">
                <span class="inverse">
                  <input type="radio" name="header_bg" value="default" id="header_bg_1" checked>
                  <label for="header_bg_1"></label>
                </span>
                <span>
                  <input type="radio" name="header_bg" value="color_2" id="header_bg_2">
                  <label for="header_bg_2"></label>
                </span>
                <span>
                  <input type="radio" name="header_bg" value="color_3" id="header_bg_3">
                  <label for="header_bg_3"></label>
                </span>
                <span>
                  <input type="radio" name="header_bg" value="color_4" id="header_bg_4">
                  <label for="header_bg_4"></label>
                </span>
                <span>
                  <input type="radio" name="header_bg" value="color_5" id="header_bg_5">
                  <label for="header_bg_5"></label>
                </span>
                <span>
                  <input type="radio" name="header_bg" value="color_6" id="header_bg_6">
                  <label for="header_bg_6"></label>
                </span>
                <span>
                  <input type="radio" name="header_bg" value="color_7" id="header_bg_7">
                  <label for="header_bg_7"></label>
                </span>
                <span>
                  <input type="radio" name="header_bg" value="color_8" id="header_bg_8">
                  <label for="header_bg_8"></label>
                </span>
				</li>
			  <li class="drop-title"><p>侧边栏</p></li>
			  <li class="drop-skin-li clearfix">
                <span class="inverse">
                  <input type="radio" name="sidebar_bg" value="default" id="sidebar_bg_1" checked>
                  <label for="sidebar_bg_1"></label>
                </span>
                <span>
                  <input type="radio" name="sidebar_bg" value="color_2" id="sidebar_bg_2">
                  <label for="sidebar_bg_2"></label>
                </span>
                <span>
                  <input type="radio" name="sidebar_bg" value="color_3" id="sidebar_bg_3">
                  <label for="sidebar_bg_3"></label>
                </span>
                <span>
                  <input type="radio" name="sidebar_bg" value="color_4" id="sidebar_bg_4">
                  <label for="sidebar_bg_4"></label>
                </span>
                <span>
                  <input type="radio" name="sidebar_bg" value="color_5" id="sidebar_bg_5">
                  <label for="sidebar_bg_5"></label>
                </span>
                <span>
                  <input type="radio" name="sidebar_bg" value="color_6" id="sidebar_bg_6">
                  <label for="sidebar_bg_6"></label>
                </span>
                <span>
                  <input type="radio" name="sidebar_bg" value="color_7" id="sidebar_bg_7">
                  <label for="sidebar_bg_7"></label>
                </span>
                <span>
                  <input type="radio" name="sidebar_bg" value="color_8" id="sidebar_bg_8">
                  <label for="sidebar_bg_8"></label>
                </span>
			  </li>
		    </ul>
		  </li>
          <!--切换主题配色-->
          <li class="dropdown dropdown-profile">
            <a href="javascript:void(0)" data-toggle="dropdown" class="dropdown-toggle">
              <img class="img-avatar img-avatar-48 m-r-10" src="images/users/avatar.jpg" alt="笔下光年" />
              <span>笔下光年</span>
            </a>
            <ul class="dropdown-menu dropdown-menu-right">
              <li>
                <a class="dropdown-item" href="lyear_pages_profile.html"><i class="mdi mdi-account"></i> 个人信息</a>
              </li>
              <li>
                <a class="dropdown-item" href="lyear_pages_edit_pwd.html"><i class="mdi mdi-lock-outline"></i> 修改密码</a>
              </li>
              <li>
                <a class="dropdown-item" href="javascript:void(0)"><i class="mdi mdi-delete"></i> 清空缓存</a>
              </li>
              <li class="dropdown-divider"></li>
              <li>
                <a class="dropdown-item" href="lyear_pages_login_1.html"><i class="mdi mdi-logout-variant"></i> 退出登录</a>
              </li>
            </ul>
          </li>
        </ul>

      </nav>

    </header>
    <!--End 头部信息-->

    <!--页面主要内容-->
    <main class="lyear-layout-content">

<div class="container-fluid p-t-15">

  <div class="row">

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header"><div class="card-title">表格插件</div></header>
        <div class="card-body">

          <p>插件使用用bootstrap-table 1.16.0，文档地址：<a href="https://www.bootstrap-table.com.cn" target="_blank">https://www.bootstrap-table.com.cn</a>，github地址：<a href="https://github.com/wenzhixin/bootstrap-table" target="_blank">https://github.com/wenzhixin/bootstrap-table</a>。</p>
          <div class="callout callout-danger">
            因x-editable不支持bootstrap v4版本，这里暂时放弃x-editable进行行内编辑。导出需要配合bootstrap-table-export.min.js、TableExport。
          </div>
          <div id="toolbar" class="toolbar-btn-action">
            <button id="btn_add" type="button" class="btn btn-primary m-r-5">
              <span class="mdi mdi-plus" aria-hidden="true"></span>新增
            </button>
            <button id="btn_edit" type="button" class="btn btn-success m-r-5">
              <span class="mdi mdi-check" aria-hidden="true"></span>启用
            </button>
            <button id="btn_edit" type="button" class="btn btn-warning m-r-5">
              <span class="mdi mdi-block-helper" aria-hidden="true"></span>禁用
            </button>
            <button id="btn_delete" type="button" class="btn btn-danger">
              <span class="mdi mdi-window-close" aria-hidden="true"></span>删除
            </button>
          </div>
          <table id="tb_departments"></table>
          <div class="callout callout-danger mb-3">
            当你使用bootstrap-table时，如果你的列表需要用到复选框，请确保复选框的字段名称在当前页面是唯一的。
            因为插件的复选框已做修改成自定义的，需要 <code>input</code> 的 <code>id</code> 属性配合实现。
          </div>
          <pre>{
    field: 'example', // 设置的该字段名称，需保证页面唯一
    checkbox: true    // 是否显示复选框
}</pre>

        </div>
      </div>
    </div>

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header"><div class="card-title">TreeGrid使用</div></header>
        <div class="card-body">

          <div id="toolbar2" class="toolbar-btn-action">
            <button type="button" class="btn btn-primary m-r-5" onclick="test()">返回选中行</button>
          </div>

          <table class="tree-table"></table>
        </div>
      </div>
    </div>

  </div>

</div>

    </main>
    <!--End 页面主要内容-->
  </div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.min.js"></script>
<script type="text/javascript" src="js/jquery-confirm/jquery-confirm.min.js"></script>
<script type="text/javascript" src="js/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
<script type="text/javascript">
$('#tb_departments').bootstrapTable({
    classes: 'table table-bordered table-hover table-striped',
    url: 'http://www.bixiaguangnian.com/index/test/getExampleJson',
    method: 'get',
    dataType : 'jsonp',        // 因为本示例中是跨域的调用,所以涉及到ajax都采用jsonp,
    uniqueId: 'id',
    idField: 'id',             // 每行的唯一标识字段
    toolbar: '#toolbar',       // 工具按钮容器
    //clickToSelect: true,     // 是否启用点击选中行
    showColumns: true,         // 是否显示所有的列
    showRefresh: true,         // 是否显示刷新按钮

    showToggle: true,        // 是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)

    pagination: true,                    // 是否显示分页
    sortOrder: "asc",                    // 排序方式
    queryParams: function(params) {
        var temp = {
            limit: params.limit,         // 每页数据量
            offset: params.offset,       // sql语句起始索引
            page: (params.offset / params.limit) + 1,
            sort: params.sort,           // 排序的列名
            sortOrder: params.order      // 排序方式'asc' 'desc'
        };
        return temp;
    },                                   // 传递参数
    sidePagination: "server",            // 分页方式：client客户端分页，server服务端分页
    pageNumber: 1,                       // 初始化加载第一页，默认第一页
    pageSize: 10,                        // 每页的记录行数
    pageList: [10, 25, 50, 100],         // 可供选择的每页的行数
    //search: true,                      // 是否显示表格搜索，此搜索是客户端搜索

    //showExport: true,        // 是否显示导出按钮, 导出功能需要导出插件支持(tableexport.min.js)
    //exportDataType: "basic", // 导出数据类型, 'basic':当前页, 'all':所有数据, 'selected':选中的数据

    columns: [{
        field: 'example',
        checkbox: true    // 是否显示复选框
    }, {
        field: 'id',
        title: 'ID',
        sortable: true    // 是否排序
    }, {
        field: 'author',
        title: '作者'
    }, {
        field: 'dynasty',
        title: '朝代',
    }, {
        field: 'nationality',
        title: '国籍'
    }, {
        field: 'opus',
        title: '作品'
    }, {
        field: 'category',
        title: '分类'
    }, {
        field: 'status',
        title: '状态',
        formatter:function(value, row, index){
			var value="";
			if (row.status == '0') {
				value = '<span class="badge badge-danger">禁用</span>';
			} else if(row.status == '1') {
				value = '<span class="badge badge-success">正常</span>';
			}else {
				value = row.pType ;
			}
			return value;
		}
    }, {
        field: 'operate',
        title: '操作',
        formatter: btnGroup,  // 自定义方法
        events: {
            'click .edit-btn': function (event, value, row, index) {
                editUser(row);
            },
            'click .del-btn': function (event, value, row, index) {
                delUser(row);
            }
        }
    }],
    onLoadSuccess: function(data){
        $("[data-toggle='tooltip']").tooltip();
    }
});

// 操作按钮
function btnGroup ()
{
    let html =
        '<a href="#!" class="btn btn-xs btn-default m-r-5 edit-btn" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>' +
        '<a href="#!" class="btn btn-xs btn-default del-btn" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>';
    return html;
}

// 操作方法 - 编辑
function editUser()
{
    alert('跳转修改信息');
}
// 操作方法 - 删除
function delUser()
{
    alert('信息删除成功');
}
</script>
<!--以下是tree-grid的使用示例-->
<link href="js/jquery-treegrid/jquery.treegrid.min.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-treegrid/jquery.treegrid.min.js"></script>
<script type="text/javascript" src="js/bootstrap-table/extensions/treegrid/bootstrap-table-treegrid.min.js"></script>
<script type="text/javascript">
// tree-grid使用
var data = JSON.parse(
        '[{"id":1, "pid":0, "status":1, "name":"用户管理", "permissionValue":"open:user:manage"},' +
        '{"id":2, "pid":0, "status":1, "name":"系统管理", "permissionValue":"open:system:manage"},' +
        '{"id":3, "pid":1, "status":1, "name":"新增用户", "permissionValue":"open:user:add"},' +
        '{"id":4, "pid":1, "status":1, "name":"修改用户", "permissionValue":"open:user:edit"},' +
        '{"id":5, "pid":1, "status":0, "name":"删除用户", "permissionValue":"open:user:del"},' +
        '{"id":6, "pid":2, "status":1, "name":"系统配置管理", "permissionValue":"open:systemconfig:manage"},' +
        '{"id":7, "pid":6, "status":1, "name":"新增配置", "permissionValue":"open:systemconfig:add"},' +
        '{"id":8, "pid":6, "status":1, "name":"修改配置", "permissionValue":"open:systemconfig:edit"},' +
        '{"id":9, "pid":6, "status":0, "name":"删除配置", "permissionValue":"open:systemconfig:del"},' +
        '{"id":10, "pid":2,"status":1, "name":"系统日志管理", "permissionValue":"open:log:manage"},' +
        '{"id":11, "pid":10,"status":1, "name":"新增日志", "permissionValue":"open:log:add"},' +
        '{"id":12, "pid":10,"status":1, "name":"修改日志", "permissionValue":"open:log:edit"},' +
        '{"id":13, "pid":10,"status":0, "name":"删除日志", "permissionValue":"open:log:del"}]');

var $treeTable = $('.tree-table');
$treeTable.bootstrapTable({
    data: data,
    idField: 'id',
    uniqueId: 'id',
    dataType: 'jsonp',
    toolbar: '#toolbar2',
    columns: [
        {
            field: 'check',
            checkbox: true
        },
        {
            field: 'name',
            title: '名称'
        },
        {
            field: 'status',
            title: '状态',
            sortable: true,
            /*
             * 可以选择采用开关来处理状态显示
             * 或者采用上个示例的处理方式
             */
            formatter: function (value, row, index) {
                if (value == 0) {
                    is_checked = '';
                } else if (value == 1){
                    is_checked = 'checked="checked"';
                }
                result = '<div class="custom-control custom-switch"><input type="checkbox" class="custom-control-input" id="customSwitch'+ row.id +'" '+ is_checked +'><label class="custom-control-label" for="customSwitch'+ row.id +'" onClick="updateStatus('+ row.id +', '+ value +')"></label></div>';

                return result;
            },
        },
        {
            field: 'permissionValue',
            title: '权限值'
        },
        {
            field: 'operate',
            title: '操作',
            align: 'center',
            events : {
                'click .role-add': function (e, value, row, index) {
                    add(row.id);
                },
                'click .role-delete': function (e, value, row, index) {
                    del(row.id);
                },
                'click .role-edit': function (e, value, row, index) {
                    update(row.id);
                }
            },
            formatter: operateFormatter
        }
    ],

    treeShowField: 'name',
    parentIdField: 'pid',

    onResetView: function(data) {
        $treeTable.treegrid({
            initialState: 'collapsed', // 所有节点都折叠
            treeColumn: 1,
            //expanderExpandedClass: 'mdi mdi-folder-open',  // 可自定义图标样式
            //expanderCollapsedClass: 'mdi mdi-folder',
        });

        // 只展开树形的第一集节点
        $treeTable.treegrid('getRootNodes').treegrid('expand');
    },
    onCheck: function(row) {
        var datas = $treeTable.bootstrapTable('getData');

        selectChilds(datas, row, 'id', 'pid', true); // 选择子类

        selectParentChecked(datas, row, 'id', 'pid'); // 选择父类

        $treeTable.bootstrapTable('load', datas);
    },

    onUncheck: function(row) {
        var datas = $treeTable.bootstrapTable('getData');
        selectChilds(datas, row, 'id', 'pid', false);
        $treeTable.bootstrapTable('load', datas);
    },
});

// 操作按钮
function operateFormatter(value, row, index) {
    return [
        '<a type="button" class="role-add btn btn-xs btn-default m-r-5" title="编辑" data-toggle="tooltip"><i class="mdi mdi-plus"></i></a>',
        '<a type="button" class="role-edit btn btn-xs btn-default m-r-5" title="修改" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>',
        '<a type="button" class="role-delete btn btn-xs btn-default" title="删除" data-toggle="tooltip"><i class="mdi mdi-delete"></i></a>'
    ].join('');
}

/**
 * 选中父项时，同时选中子项
 * @param datas 所有的数据
 * @param row 当前数据
 * @param id id 字段名
 * @param pid 父id字段名
 */
function selectChilds(datas,row,id,pid,checked) {
    for(var i in datas){
        if(datas[i][pid] == row[id]){
            datas[i].check=checked;
            selectChilds(datas,datas[i],id,pid,checked);
        };
    }
}

function selectParentChecked(datas,row,id,pid){
    for(var i in datas){
        if(datas[i][id] == row[pid]){
            datas[i].check=true;
            selectParentChecked(datas,datas[i],id,pid);
        };
    }
}

function add(id) {
    alert("add 方法 , id = " + id);
}
function del(id) {
    alert("del 方法 , id = " + id);
}
function update(id) {
    alert("update 方法 , id = " + id);
}
function updateStatus(id, state) {
    var newstate = (state == 1) ? 0 : 1; // 发送参数值跟当前参数值相反
    $.ajax({
        type: "get",
        url: "http://www.bixiaguangnian.com/index/test/testGridJson",
        data: {id: id, state: newstate},
        dataType: 'jsonp',
        success: function (data, status) {
            if (data.code == '200') {
                $treeTable.bootstrapTable('updateCellByUniqueId', {id: id, field: 'status', value: newstate});
            } else {
                alert(data.msg);
                $treeTable.bootstrapTable('updateCellByUniqueId', {id: id, field: 'status', value: state}); // 因开关点击后样式是变的，失败也重置下
            }
        },
        error: function () {
            alert('修改失败，请稍后再试');
        }
    });
}

function test() {
    var selRows = $treeTable.bootstrapTable("getSelections");
    if(selRows.length == 0){
        alert("请至少选择一行");
        return;
    }
	console.log(selRows);

    var postData = "";
    $.each(selRows,function(i) {
        postData +=  this.id;
        if (i < selRows.length - 1) {
            postData += "， ";
        }
    });
    alert("你选中行的 id 为："+postData);
}
</script>
</body>
</html>