首页
所有分类
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的逻辑运算符 ||
May 31 Javascript
js中的值类型和引用类型小结 文字说明与实例
Dec 12 Javascript
js简单实现让文本框内容逐个字的显示出来
Oct 22 Javascript
jQuery中nextAll()方法用法实例
Jan 07 Javascript
jQuery实现连续动画效果实例分析
Oct 09 Javascript
基于javascript实现右下角浮动广告效果
Jan 08 Javascript
在React框架中实现一些AngularJS中ng指令的例子
Mar 06 Javascript
JS中去掉array中重复元素的方法
May 26 Javascript
JavaScript箭头(arrow)函数详解
Jun 04 Javascript
详解vue2.0模拟后台json数据
May 16 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
Jun 07 Javascript
vue 移动端记录页面浏览位置的方法
Mar 11 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
OpenFeign(1) K8s(1) NTP(1) calc(1) Hive(5) HttpClient(1) SandBox(1) Windows Server(4) swing(1) Windows Server 2022(3)
You might like
介绍几个array库的新函数 php
2006/12/29 PHP
简单的PHP多图上传小程序代码
2011/07/17 PHP
php对二维数组进行相关操作（排序、转换、去空白等）
2015/11/04 PHP
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
2007/03/27 Javascript
JS截取url中问号后面参数的值信息
2014/04/29 Javascript
通过url查找a元素应用案例
2014/04/29 Javascript
jQuery实现延迟跳转的方法
2015/06/05 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
2015/06/30 Javascript
Bootstrap入门书籍之（一）排版
2016/02/17 Javascript
JavaScript驾驭网页-CSS与DOM
2016/03/24 Javascript
jQuery实现div跟随鼠标移动
2020/08/20 jQuery
使用javaScript实现鼠标拖拽事件
2020/04/03 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
2018/07/13 jQuery
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
2019/05/09 Javascript
jQuery子选择器与可见性选择器实例分析
2019/06/28 jQuery
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
[02:40]2018年度DOTA2最佳新人-完美盛典
2018/12/16 DOTA
利用python实现数据分析
2017/01/11 Python
Python 中迭代器与生成器实例详解
2017/03/29 Python
使用requests库制作Python爬虫
2018/03/25 Python
DataFrame:通过SparkSql将scala类转为DataFrame的方法
2019/01/29 Python
Python学习笔记之Zip和Enumerate用法实例分析
2019/08/14 Python
tensorflow 查看梯度方式
2020/02/04 Python
Pytorch数据拼接与拆分操作实现图解
2020/04/30 Python
python主要用于哪些方向
2020/07/05 Python
Python getsizeof()和getsize()区分详解
2020/11/20 Python
html5 更新图片颜色示例代码
2014/07/29 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
2020/09/10 HTML / CSS
英国高级健康和美容产品零售商：Life and Looks
2019/08/01 全球购物
化工工艺专业求职信
2013/09/22 职场文书
外语系毕业生自荐信范文
2013/12/16 职场文书
中式婚礼主持词
2014/03/13 职场文书
优秀的2014年两会精神解读
2014/03/17 职场文书
国旗下的演讲稿
2014/05/08 职场文书
体育口号大全
2014/06/18 职场文书