首页
所有分类
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 相关文章推荐
选择器中含有空格在使用示例及注意事项
Jul 31 Javascript
javascript抖动元素的小例子
Oct 28 Javascript
js+html5实现canvas绘制镂空字体文本的方法
Jun 05 Javascript
在AngularJS中使用jQuery的zTree插件的方法
Apr 21 Javascript
微信小程序表单验证form提交错误提示效果
Jun 19 Javascript
jQuery解析json格式数据示例
Sep 01 jQuery
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
Sep 14 Javascript
使用原生js编写一个简单的框选功能方法
May 13 Javascript
开发中常用的25个JavaScript单行代码(小结)
Jun 28 Javascript
JS用最简单的方法实现四舍五入
Aug 27 Javascript
vue基于v-charts封装双向条形图的实现代码
Dec 09 Javascript
解决vue自定义组件@click点击失效问题
Apr 30 Vue.js
详解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
输入法(2) 404(1) Sunmao(1) svg(1) xps(1) sout(1) CAD(1) macos(1) Sentry(1) 403(1)
You might like
浅析Apache中RewriteCond规则参数的详细介绍
2013/06/30 PHP
php中如何判断一个网页请求是ajax请求还是普通请求
2013/08/10 PHP
PHP获取文件相对路径的方法
2015/02/26 PHP
Yii2分页的使用及其扩展方法详解
2016/05/23 PHP
php实现小程序支付完整版
2018/10/09 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
在IE下：float属性会影响offsetTop的取值
2006/12/22 Javascript
你所要知道JS（DHTML）中的一些技巧
2007/01/09 Javascript
jquery JSON的解析方式
2009/07/25 Javascript
jquery弹出层类代码分享
2013/12/27 Javascript
JavaScript显示当前文档最后修改日期的方法
2015/03/19 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
2015/06/10 Javascript
javascript日期格式化方法汇总
2015/10/04 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
2016/01/27 Javascript
AngularJS表格详解及示例代码
2016/08/17 Javascript
Angular和百度地图的结合实例代码
2016/10/19 Javascript
jQuery倒计时代码(超简单)
2017/02/27 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
2017/10/27 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
2018/09/21 Javascript
js指定日期增加指定月份的实现方法
2018/12/19 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
2020/08/03 Javascript
[01:00:53]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Secret
2018/03/30 DOTA
Python脚本获取操作系统版本信息
2016/12/17 Python
python入门教程之识别验证码
2017/03/04 Python
浅谈pyhton学习中出现的各种问题(新手必看)
2017/05/17 Python
python如何在列表、字典中筛选数据
2018/03/19 Python
Python列表(list)所有元素的同一操作解析
2019/08/01 Python
python 爬取腾讯视频评论的实现步骤
2021/02/18 Python
纯CSS3实现的井字棋游戏
2020/11/25 HTML / CSS
英语分层教学实施方案
2014/06/15 职场文书
升学宴演讲稿
2014/09/01 职场文书
学生检讨书怎么写？
2014/10/10 职场文书
雷锋的观后感
2015/06/10 职场文书
教你使用一行Python代码玩遍童年的小游戏
2021/08/23 Python
如何利用python实现Simhash算法
2022/06/28 Python