bootstrap做的jsp页面（包括根据值让table显示选中）

最新推荐文章于 2020-06-16 15:12:27 发布
最新推荐文章于 2020-06-16 15:12:27 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29720781/article/details/54093390
版权 
<%@ 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">&nbsp;&nbsp;保存</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">&nbsp;&nbsp;保存</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>
想当大叔的段子手
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap-table使用浅析
Tomcat_x的博客
01-15 3363
做JavaWeb一个论坛项目，要求帖子列表实现分页功能，多番查找，最后还是选择了bootstrap-table表格，觉得相对而言简单一点点吧。。。话不多说，先上效果图： 首先jsp页面头部除了引入bootstrap相关的js与css文件之外，还要引入如下文件 可以去这里下载 bootstrap-table下载 引入文件之后开始进入正题 在要显示的页面的body标签中加入
bootstrap制作jsp页面（根据值让table显示选中）
10-20
主要为大家详细介绍了bootstrap做的jsp页面,根据值让table显示选中，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
简洁大气的Bootstrap前台框架（Jsp版）
08-31
纯手工原创 良心制作
bootstrapjsp页面
qq_29720781的博客
01-09 712
<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@page import="java.text.SimpleDateFormat"%> <%@include file="/views/resource.jsp"%>
bootstrap响应式表格
weixin_41756573的博客
08-28 578
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap响应式表格</title> <!-- 下面包含相关属性的介绍--> <meta name="viewport" content="w...
java springMVC bootstrap bootstrap-table 分页等实例
08-22
java springMVC架框下 JS( bootstrap bootstrap-table bootstrap-select bootstrap-timepicker) 的实例演练，分页实现
bootstrap table实现点击翻页功能 可记录上下页选中的行
11-29
2. `merge_order_object`：这是一个对象，键是页码，值是一个包含该页选中行ID的数组。 3. `jsonObj`：用于解析 `textarea` 中存储的JSON格式数据，以便处理选中的行ID。 4. `current_page`：当前页面的页码，用于...
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
08-30
本篇将详细介绍如何在Bootstrap Table中实现复选框的默认选中功能，特别地，我们将根据从数据库获取的状态来决定复选框是否被选中。 首先，我们需要引入Bootstrap Table的相关库，包括CSS和JavaScript文件。这些...
bootstrapTable 自定义可编辑每页显示的记录数
03-02
引用在table.js后面，把原来的下拉选择每页数量变为输入框输入
BootStrap框架下使用JS动态加载table并点击相关列弹出二级页面
相约滦北来看你
06-16 1478
BootStrap框架下使用JS动态加载table并点击相关列弹出二级页面一级table动态加载二级table动态产生 在这里记录一下，也是在公司用到的一个例子，刚刚解决，正好趁热打铁。前端页面是采用BootStrap框架搭建的，主要的样式涉及到项目，在这里就不截图了，直接上代码： 一级table动态加载 jsp/html中的table代码： <table id="data-table" class="table table-striped table-condensed" border="0"
添加与编辑共用一个jsp页面时，控制按钮的显示与隐藏
BADAO_LIUMANG_QIZHI的博客
11-26 3587
场景 添加与编辑共用一个jsp页面，后台action传过来 op参数，如果是edit则执行编辑，如果是add，则执行添加。 如果是编辑页面则显示充值按钮，如果是添加页面则不显示。 实现 后台action 添加： //传递当前的操作类型的标识，左边是op常量参数，表示操作类型，右边是add常量参数，表示是添加操作 mv.addObject(ModelAndViewConstants.O...
在jsp页面中使用bootstrap制作
Youngzhou的博客
06-09 1万+
1.在webroot中添加res文件夹，将bootstrap添加 2.改路径 将Link 的href 改成bootstrap中min.css的路径 或者用<link rel="stylesheet" type="text/css" href="../../res/bootstrap/css/bootstrap.min.css">3.col-xs-3(表示表格宽带为3，总为12） col
Bootstrap Table使用分享
weixin_30824599的博客
02-02 302
版权声明：本文为博主原创文章，未经博主允许不得转载。 最近客户提出需求，想将原有的管理系统，做下优化，通过手机也能很好展现，想到2个方案: a方案：保留原有的页面，新设计一套适合手机的页面，当手机访问时，进入m.zhy.com(手机页面)，pc设备访问时，进入www.zhy.com(pc页面) b方案：采用bootstrap框架,替换原有页面，自动适应手机、平板、PC 设备 采...
bootstrap-table的使用（6）--从servlet传回jsp页面中，除了total和rows外更多的额值
baidu_31788709的博客
10-22 964
jsp中的内容 请注意responseHandler: function (res)中的内容。 在下面，先是定义了一个id为calcul的label标签，然后我将通过responseHandler函数，在该标签中显示从servlet中传回来的别的参数。 <label style=" float:bottom;font-size: 13px;padding: 5px 10px 0px 10px......
如何实现BootStrapTable的动态表格
热门推荐
编程小透明的博客
09-13 4万+
BootStrapTable的动态表格 在我们构建BootStrapTable(下文中均称：BsTable)，其中columns参数作为表格列的内容存储，我们的需求是根据返回的数据动态的生成columns参数的内容。从而生成动态表格。 columns参数格式：类似下文 columns: { { field: 'Id', title: '编号', ...
bootstrap table动态加载数据
qq_20867981的博客
03-24 2万+
点击选择按钮，弹出模态框，加载出关键词列表 TABLE样式： id="ClickModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >        × 关键词表 <table class="table table-hover" id="Cli
bootstraptable获取下拉框选中的值
最新发布
05-24
如果你的下拉框是通过 Bootstrap Table 的 `editable` 插件创建的，可以在 `onEditableSave` 事件中获取选中的值： ```javascript $('#tableId').bootstrapTable({ // ... editable: { onEditableSave: function...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值