首页
所有分类
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 相关文章推荐
jquery中ajax学习笔记一
Oct 16 Javascript
JavaScript创建类/对象的几种方式概述及实例
May 06 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
Apr 18 Javascript
bootstrap使用validate实现简单校验功能
Dec 02 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用（附源码）
Mar 14 Javascript
AngularJS表单验证功能分析
May 26 Javascript
详解webpack解惑：require的五种用法
Jun 09 Javascript
浅谈React深度编程之受控组件与非受控组件
Dec 26 Javascript
Vue 全家桶实现移动端酷狗音乐功能
Nov 16 Javascript
Vuex实现数据共享的方法
Dec 20 Javascript
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
JavaScript实现网页跨年倒计时
Dec 02 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
MybatisPlus(2) Qlabel(1) Normal From(1) linux(15) MapReduce(1) JSON(10) css3 (2) pyqt5(3) pycharm(6) SpringBoot(22)
You might like
生成php程序的php代码
2008/04/07 PHP
简单的php 验证图片生成函数
2009/05/21 PHP
php设计模式 Interpreter(解释器模式)
2011/06/26 PHP
PHP二维数组的去重问题解析
2011/07/17 PHP
PHP array_shift()用法实例分析
2019/01/07 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
PHP实现简单的计算器
2020/08/28 PHP
一个简单的JavaScript 日期计算算法
2009/09/11 Javascript
Node.js 学习笔记之简介、安装及配置
2015/03/03 Javascript
7个有用的jQuery代码片段分享
2015/05/19 Javascript
JavaScript电子时钟倒计时第二款
2016/01/10 Javascript
jQuery简单设置文本框回车事件的方法
2016/08/01 Javascript
深入理解ES6的迭代器与生成器
2017/08/19 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
2017/12/07 Javascript
vue mounted组件的使用
2018/06/18 Javascript
使用Node搭建reactSSR服务端渲染架构
2018/08/30 Javascript
vue ajax 拦截原理与实现方法示例
2019/11/29 Javascript
jquery添加div实现消息聊天框
2020/02/08 jQuery
Python 拷贝对象（深拷贝deepcopy与浅拷贝copy）
2008/09/06 Python
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
Python实现基本数据结构中栈的操作示例
2017/12/04 Python
TensorFlow如何实现反向传播
2018/02/06 Python
pycharm设置鼠标悬停查看方法设置
2019/07/29 Python
Win10环境python3.7安装dlib模块趟过的坑
2019/08/01 Python
详解用python生成随机数的几种方法
2019/08/04 Python
对Keras中predict()方法和predict_classes()方法的区别说明
2020/06/09 Python
python线程里哪种模块比较适合
2020/08/02 Python
详解css3 mask遮罩实现一些特效
2018/10/24 HTML / CSS
css3中transition属性详解
2014/09/02 HTML / CSS
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
几道PHP面试题
2013/04/14 面试题
应届生服务员求职信
2013/10/31 职场文书
毕业生自我鉴定
2013/11/05 职场文书
班级德育工作实施方案
2014/02/21 职场文书
工作态度检讨书范文
2015/05/06 职场文书
Android学习之BottomSheetDialog组件的使用
2022/06/21 Java/Android