首页
所有分类
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 相关文章推荐
JS 面向对象的5钟写法
Jul 31 Javascript
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
Nov 12 Javascript
js获取Html元素的实际宽度高度的方法
May 19 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
Jun 12 Javascript
深入浅析JavaScript中的scrollTop
Jul 11 Javascript
关于Jquery中的事件绑定总结
Oct 26 Javascript
解决vue select当前value没有更新到vue对象属性的问题
Aug 30 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
Oct 09 Javascript
JS高阶函数原理与用法实例分析
Jan 15 Javascript
微信小程序五子棋游戏的棋盘，重置，对弈实现方法【附demo源码下载】
Feb 20 Javascript
JS异步错误捕获的一些事小结
Apr 26 Javascript
关于JavaScript数组去重的一些理解汇总
Sep 10 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
SRF-22W(1) 德生G88(1) SRF-40W(1) 华普R-96(1) ICF-SW100(1) 纸巾盒(1) AE3805(1) 德生1994(1) ICF-F10(1) PR-D3L(1)
You might like
基于数据库的在线人数，日访问量等统计
2006/10/09 PHP
PHP截取汉字乱码问题解决方法mb_substr函数的应用
2008/03/30 PHP
php fsockopen伪造post与get方法的详解
2013/06/14 PHP
在线编辑器的实现原理(兼容IE和FireFox)
2007/03/09 Javascript
js字符编码函数区别分析
2011/12/28 Javascript
jQuery 开发者应该注意的9个错误
2012/05/03 Javascript
JS动态增加删除UL节点LI及相关内容示例
2014/05/21 Javascript
用js编写的简单的计算器代码程序
2015/08/04 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
2016/01/21 Javascript
jQuery的ajax和遍历数组json实例代码
2016/08/01 Javascript
详解Javascript中的原型OOP
2016/10/12 Javascript
Javascript 两种刷新方法以及区别和适用范围
2017/01/17 Javascript
jquery.tableSort.js表格排序插件使用方法详解
2020/08/12 Javascript
AngularJS学习第二篇 AngularJS依赖注入
2017/02/13 Javascript
Vue2单一事件管理组件通信
2017/05/09 Javascript
详解Node.js 命令行程序开发教程
2017/06/07 Javascript
JS中的三个循环小结
2017/06/20 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
2017/08/29 jQuery
vue动态绑定class的几种常用方式小结
2019/05/21 Javascript
ES6 Promise对象的应用实例分析
2019/06/27 Javascript
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
解决Python 命令行执行脚本时,提示导入的包找不到的问题
2019/01/19 Python
python实现电子产品商店
2019/02/26 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
利用HTML5+CSS3实现3D转换效果实例详解
2017/05/02 HTML / CSS
美国最大的城市服装和运动鞋零售商：Jimmy Jazz
2016/11/19 全球购物
如何查找网页漏洞
2016/06/22 面试题
施工安全生产承诺书
2014/05/23 职场文书
美食节策划方案
2014/05/26 职场文书
安全责任书范文
2014/08/25 职场文书
关于感恩的演讲稿200字
2014/08/26 职场文书
微观世界观后感
2015/06/10 职场文书
React Fragment介绍与使用详解
2021/11/11 Javascript