本文實例為大家分享了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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
