<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@include file="/views/resource.jsp"%> <body> <div> <div> <div> 用户配置 <button type="button"> <i></i> </button> <button type="button"> <i></i> </button> </div> <div> <table 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> <div> <div></div> <div> <p>当前状态为空</p> </div> </div> </div> </div> <div> <div> <p> 新增配置 <button type="button"> <i></i><span> 保存</span> </button> </p> <p> 详细信息 <button type="button"> <i></i><span> 保存</span> </button> </p> </div> <div id=listuser> <div> <label>ID：</label> <div> <input type="text" placeholder="" data-tabindex="1"> </div> </div> <div> <label>用户名称：</label> <div> <input type="text" placeholder="" data-tabindex="1"> </div> </div> <div> <label>登录名称：</label> <div> <input type="text" placeholder="" data-tabindex="1"> </div> </div> <div> <label>密码：</label> <div> <input type='password'> <input type="password" placeholder="" data-tabindex="1"> </div> </div> <div> <label>确认密码密码：</label> <div> <input type='password'> <input type='password' placeholder="" data-tabindex="1"> <!--这里的name没实际作用 --> </div> </div> <div> <label>邮箱：</label> <div> <input type="text" placeholder="" data-tabindex="1"> </div> </div> <div> <label>授权：</label> <div> <table data-toggle="table"> <thead> <tr> <th data-field='state' data-checkbox="true"></th> <th data-field="id">ID</th> <th data-field="name">名称</th> <th data-field="code">编码</th> </tr> </thead> </table> </div> </div> </div> </div> <div> <div> <div></div> <div></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显示选中）
内容版权声明：除非注明，否则皆为本站原创文章。