首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

bootstrap制作jsp页面（根据值让table显示选中）

Posted in Javascript onJanuary 05, 2017

本文实例为大家分享了bootstrap制作jsp页面的具体代码，告诉大家如何让table显示选中，供大家参考，具体内容如下

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/views/resource.jsp"%>
<body style="background-color: transparent;">
 <div class="row no-margin">
  <div id="leftlist"
   class="page-content page-content-inner margin-control left-container col-xs-4 col-sm-4 col-md-4 col-lg-4">
   <div class="config-title">
    用户配置
    <button id="adduser" type="button" class="btn btn-default">
     <i class="glyphicon glyphicon-plus"></i>
    </button>
    <button id="deluser" type="button" class="btn btn-default">
     <i class="glyphicon glyphicon-trash"></i>
    </button>
   </div>

   <div id="" class="form-group ">
    <table class="table " id="tableuser" data-toggle="table">
     <thead>
      <tr>
       <th data-field='select' data-checkbox="true"></th>
       <th data-field="name">用户名称</th>
       <th data-field="login_name">登录名称</th>
      </tr>
     </thead>

    </table>
   </div>
   <div class="form-group hidden active">
    <div class="config-none-center" id="nonetable">
     <div class="img-none"></div>
     <div class="text-none">
      <p>当前状态为空</p>
     </div>
    </div>
   </div>

  </div>


  <div id="internal_engine_right_container"
   class="right-container col-xs-8 col-sm-8 col-md-8 col-lg-8 ">
   <div>

    <p class="margin-control config-title" id="add"
     style="display: none">
     新增配置
     <button id="save" type="button" class="btn btn-control">
      <i class="fa fa-save"></i><span id="addsave">  保存</span>
     </button>
    </p>
    <p class="margin-control config-title" id="message"
     style="display: none">
     详细信息
     <button id="modifyMessage" type="button" class="btn btn-control">
      <i class="fa fa-save"></i><span id="modifysave">  保存</span>
     </button>
    </p>

   </div>
   <div class="form-body margin-control" id=listuser>
    <div
     class="row margin-control col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2 hide">
     <label class="col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label">ID：</label>
     <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
      <input type="text" class="form-control " placeholder=""
       data-tabindex="1" id="id" name="id">
     </div>
    </div>


    <div
     class="row margin-control col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2">
     <label class="col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label"
      id="" name="">用户名称：</label>
     <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
      <input type="text" class="form-control" placeholder=""
       data-tabindex="1" id="name" name="name">
     </div>
    </div>
    <div
     class="row margin-control col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2">
     <label class="col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label">登录名称：</label>
     <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
      <input type="text" class="form-control" placeholder=""
       data-tabindex="1" id="login_name" name="login_name">
     </div>
    </div>

    <div
     class="row margin-control col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2">
     <label class="col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label">密码：</label>

     <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
      <input type='password' style='display: none' name='password'>
      <input type="password" class="form-control" placeholder=""
       data-tabindex="1" id="password" name="password">
     </div>
    </div>
    <div
     class="row margin-control col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2">
     <label class="col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label">确认密码密码：</label>
     <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
      <input type='password' style='display: none' name='password'>
      <input type='password' class="form-control" placeholder=""
       data-tabindex="1" id="passwordagin" name="password">
      <!--这里的name没实际作用 -->
     </div>
    </div>
    <div
     class="row margin-control col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2">
     <label class="col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label">邮箱：</label>
     <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
      <input type="text" class="form-control" placeholder=""
       data-tabindex="1" id="email" name="email">
     </div>
    </div>
    <div
     class="row margin-control col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2">
     <label class="col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label">授权：</label>
     <div id="" class="form-group col-xs-8 col-sm-8 col-md-8 col-lg-8">
      <table class="table " id="tableRole" data-toggle="table">
       <thead>
        <tr>
         <th data-field='state' data-checkbox="true"></th>
         <th data-field="id" class="hide">ID</th>
         <th data-field="name">名称</th>
         <th data-field="code">编码</th>
        </tr>
       </thead>

      </table>
     </div>
    </div>
   </div>
  </div>
  <div id=""
   class="right-container col-xs-8 col-sm-8 col-md-8 col-lg-8 hidden active">
   <div class="config-none-center" id="nonelist">
    <div class="img-none"></div>
    <div class="text-none"></div>
   </div>
  </div>
 </div>
</body>
<script type="text/javascript">
var i=0; //控制初始化行数
var a=5; //控制具体进行修改或者删除或者增加之中的哪个操作
var $tableRole=$('#tableRole');
var $table= $('#tableuser');
var datar=null;
function nonedisplay(){//显示为空状态
 $('#nonelist').show();
 $('#nonetable').show();
};
function nonedisappear(){//隐藏为空状态
 $('#nonelist').hide();
 $('#nonetable').hide();
}
function disappearBut(){ //隐藏左上角的删除按钮

 $('#deluser').hide();
 }
function displayBut(){//显示左上角的删除按钮

 $('#deluser').show();
}

function displayTopMessage(){ //显示右上角详细信息
 $('#message').show();
}
function disapperTopMessage(){ //隐藏右上角详细信息
 $('#message').hide();
}

function displayTopAdd(){ //显示右上角新增配置
 $('#add').show();
}
function disapperTopAdd(){ //隐藏右上角新增配置
 $('#add').hide();
}
function disapperListUser(){ //隐藏右边列表
 $('#listuser').hide();
}
function displayListUser(){ //显示右边列表
 $('#listuser').show();
}
function disapperTable(){ //隐藏左边的table
 $('#tableuser').hide();
}
function displayTable(){//显示左边的table
 $('#tableuser').show();
}
 function setdata(data, datar){ //得到左边table里边的值向右边的list进行赋值

 $('#id').val(data[i].id);
 $('#name').val(
   data[i].name);
 $('#login_name').val(
   data[i].login_name);
 $('#password').val(
   data[i].password);
 $('#passwordagin').val(
   data[i].password);
 $('#email').val(data[i].email); 
 var ids= data[i].role_id.split(',');//左边table里查询到的id数组
  for(var j in ids){
  for(var h in datar){
   if(ids[j]==datar[h].id){
    $tableRole.bootstrapTable('check', h);    
  }
  }
 } 
}


 //获得右边列表离得数据包括右边的table里选择的数据
function getdata(){
 var rows =$("#tableRole").bootstrapTable("getSelections"); 
 var ids = [];
 $.each(rows, function(index, row) {
  ids.push(row.id);
 });
 return { name : $('#name').val(),
  login_name : $('#login_name').val(),
  password : $('#password').val(),
  email : $('#email')
    .val(),
  role_id : ids.toString() } 
}
function initTableRadio(){
 $('#tableRole').bootstrapTable('destroy');  
 $("#tableRole")
   .bootstrapTable(
     {  
      method: "get",                 
      striped:true,             
      url: "<%=request.getContextPath()%>/role/list.do",
      onLoadSuccess : function(record) {
       datar=record;              
       } 
  });

}

function initTable() {
 initTableRadio();
 $('#tableuser').bootstrapTable('destroy');  
 $("#tableuser")
   .bootstrapTable(
     {  
      method: "get",                 
      striped:true,             
      url: "<%=request.getContextPath()%>/user/list.do",

   onClickRow : function(row, tr) {

    $tableRole.bootstrapTable("uncheckAll");//每次点击行时 先清空选择框
    displayTopMessage();
    disapperTopAdd();
    i = tr[0].rowIndex - 1;
    $('#id').val(row.id);
    $('#name').val(row.name);
    $('#login_name').val(row.login_name);
    $('#password').val(row.password);
    $('#passwordagin').val(row.password);
    $('#email').val(row.email);
    var ids = row.role_id.split(',');
    console.log(ids)
    for ( var j in ids) {
     for ( var h in datar) {
      if (ids[j] == datar[h].id) {
       $tableRole.bootstrapTable('checkBy', {
        field : 'id',//
        values : [ datar[h].id ]
       });
      }
     }
    }

   },
   onLoadSuccess : function(data) {
    if (data.length == 0) {
     nonedisplay();
     disapperListUser();
     disappearBut();
     disapperTable();
     displayTopMessage();
    } else {

     nonedisappear();
     displayTable();
     if (a == 0) {//添加刷新时           
      displayBut();
      disapperTopAdd();
      displayTopMessage();
      i = data.length - 1;

      setdata(data);

     } else if (a == 3) {//修改刷新时(也就是下边的$table.bootstrapTable("refresh", a = 3);这个方法执行时)
      displayTopMessage();
      setdata(data);

     } else { //刚进来页面或者删除刷新时       
      disapperTopAdd();
      displayTopMessage();
       $tableRole.bootstrapTable("uncheckAll");
      setdata(data, datar);

     }

    }

   }
  });

 }

 $(function() {
  initTable();

  $('#adduser').click(function() {
   displayListUser();
   displayTopAdd();
   disapperTopMessage();
   $('#nonelist').hide();
   $('#name').val("");
   $('#login_name').val("");
   $('#password').val("");
   $('#passwordagin').val("");
   $('#email').val("");
   $tableRole.bootstrapTable("uncheckAll");

  });
  $('#addsave').click(function() {
   var url = "${pageContext.request.contextPath}/user/insert.do";

   var option = getdata();

   etl.ajaxJson(url, option, function(data) {
    $table.bootstrapTable("refresh", a = 0);
   });
  });

  $('#modifysave')
  //根据这个id得到修改这个按钮的值
  .click(function() {

   var url = "${pageContext.request.contextPath}/user/update.do";
   id = $('#id').val();
   var data = getdata();
   data.id = id;
   var option = data;
   etl.ajaxJson(url, option, function(data) {
    $table.bootstrapTable("refresh", a = 3);
   });
  });
  $('#deluser')
    .click(
      function() {
       var rows = $table.bootstrapTable("getSelections");

       if (rows.length < 1) {
        alert("请至少选择一个!");
        return true;
       }
       if (confirm("确认删除？")) {
        var ids = [];

        $.each(rows, function(index, row) {
         ids.push(row.id);
        });
        etl
          .ajaxJson(
            "${pageContext.request.contextPath}/user/del.do",
            {
             ids : ids
            }, function(data) {

             $table.bootstrapTable(
               "refresh", i = 0,
               a = 2);

            })
       } else {
        return true;
       }
      });
 })
</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

bootstrap制作jsp页面（根据值让table显示选中）

- Author -

qq_29720781

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Javascript实现多彩雪花从天降散落效果的方法
Feb 02 Javascript
jQuery实现延迟跳转的方法
Jun 05 Javascript
javascript中错误使用var造成undefined
Mar 31 Javascript
JS定义类的六种方式详解
May 12 Javascript
vue router仿天猫底部导航栏功能
Oct 18 Javascript
解决iview打包时UglifyJs报错的问题
Mar 07 Javascript
js实现input密码框显示/隐藏功能
Sep 10 Javascript
JS数组求和的常用方法总结【5种方法】
Jan 14 Javascript
vue watch关于对象内的属性监听
Apr 22 Javascript
微信小程序实现日期格式化和倒计时
Nov 01 Javascript
Vue项目中ESlint规范示例代码
Jul 04 Javascript
JavaScript实现Excel表格效果
Feb 07 Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 #Javascript
jQuery电话号码验证实例
Jan 05 #Javascript
纯原生js实现table表格的增删
Jan 05 #Javascript
微信小程序 tabs选项卡效果的实现
Jan 05 #Javascript
jQuery密码强度验证控件使用详解
Jan 05 #Javascript
jquery广告无缝轮播实例
Jan 05 #Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
Jan 05 #Javascript
军机(1) 77A(2) S900(1) VOLVO(1) MOTOROLA(1) 摩托罗拉(1) ETON(1) 66-XI(1) 沃尔沃(1) E1-XM(1)
You might like
别人整理的服务器变量：$_SERVER
2006/10/20 PHP
PHP中文URL编解码(urlencode()rawurlencode()
2010/07/03 PHP
jquery获取自定义属性(attr和prop)实例介绍
2013/04/21 Javascript
网页中可关闭的漂浮窗口实现可自行调节
2013/08/20 Javascript
JavaScript检测鼠标移动方向的方法
2015/05/22 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
2016/01/22 Javascript
jQuery Mobile框架中的表单组件基础使用教程
2016/05/17 Javascript
js获取iframe中的window对象的实现方法
2016/05/20 Javascript
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
2018/03/28 jQuery
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
2018/09/07 Javascript
angularJs在多个控制器中共享服务数据的方法
2018/09/30 Javascript
js中null与空字符串&quot;&quot;的区别讲解
2019/01/17 Javascript
用vue设计一个日历表
2020/12/03 Vue.js
[56:41]iG vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/17 DOTA
[01:11:37]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第一场 11.19
2020/11/19 DOTA
python 字典(dict)遍历的四种方法性能测试报告
2014/06/25 Python
Python生成随机MAC地址
2015/03/10 Python
查看TensorFlow checkpoint文件中的变量名和对应值方法
2018/06/14 Python
Python3列表内置方法大全及示例代码小结
2019/05/10 Python
Python 元组拆包示例(Tuple Unpacking)
2019/12/24 Python
TensorFlow实现从txt文件读取数据
2020/02/05 Python
Python将字典转换为XML的方法
2020/08/01 Python
中国最大的名表商城：万表网
2016/08/29 全球购物
Chupi官网：在爱尔兰手工制作的订婚、结婚戒指和精美珠宝
2020/09/28 全球购物
架构师岗位职责
2013/11/18 职场文书
民主生活会汇报材料
2014/12/15 职场文书
平遥古城导游词
2015/02/03 职场文书
技术员个人工作总结
2015/03/03 职场文书
供应商食品安全承诺书
2015/04/29 职场文书
2015年七七事变78周年纪念活动方案
2015/05/06 职场文书
《给予树》教学反思
2016/03/03 职场文书
Python读取文件夹下的所有文件实例代码
2021/04/02 Python
前端vue+express实现文件的上传下载示例
2022/02/18 Vue.js
Python中使用tkFileDialog实现文件选择、保存和路径选择
2022/05/20 Python