使用bootstrap

官网：http://www.bootcss.com/，table文档：http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/

引入css,js文件

<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap-theme.min.css">
<script src="${pageContext.request.contextPath}/bootstrap3/js/jquery-1.11.2.min.js"></script>
<script src="${pageContext.request.contextPath}/bootstrap3/js/bootstrap.min.js"></script>

使用table表格时，还要引用

<link rel="stylesheet" href="/ttest/src/bootstrap-table.css">
<script src="/ttest/src/bootstrap-table.js"></script>
<script src="/ttest/src/locale/bootstrap-table-zh-CN.js"></script>

新建一个bootstraps3的文件夹，把从官网下载的bootstraps3三个文件夹拖入新建的bootstraps3文件夹内，并在js文件夹内放入jQuery文件

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap-theme.min.css">
<script src="${pageContext.request.contextPath}/bootstrap3/js/jquery-1.11.2.min.js"></script>
<script src="${pageContext.request.contextPath}/bootstrap3/js/bootstrap.min.js"></script>


<link rel="stylesheet" href="/ttest/src/bootstrap-table.css">
<script src="/ttest/src/bootstrap-table.js"></script>
<script src="/ttest/src/locale/bootstrap-table-zh-CN.js"></script>
<script>
var pd=[];
    $(function(){
    
        $('#table').bootstrapTable({
                columns: [{
                    field: 'id',
                    title: 'Item ID'
                }, {
                    field: 'name',
                    title: 'Item Name'
                }, {
                    field: 'price',
                    title: 'Item Price'
                }, {
                    field: 'id',
                    title: '操作',
                    formatter:function(value,row ,index){
                    pd.push(row)
                    
                     return '<div class="rows">'+
                         '<div class="col-md-4" style="blackground-color:blue;color:red" onclick="f1('+index+')">修改</div>'+
                         '<div class="col-md-4" style="blackground-color:blue;color:red">删除</div>'+
                         '</div>'
                    }
                    
                }],
                data: [{
                    id: 1,
                    name: 'Item 1',
                    price: '$1',

                }, {
                    id: 2,
                    name: 'Item 2',
                    price: '$2',

                },{
                    id: 3,
                    name: 'Item 2',
                    price: '$2',

                }]
            });
    
    
    })
    
    f1=function (index){
    $('#tb_1').val(pd[index].id);
    $('#tb_2').val(pd[index].name);
    $('#tb_3').val(pd[index].price);
    $('#tb_4').val(pd[index].id);
    }
    
    function f2(){
    $("input").val('');
    }
</script>
</head>
<body>
<div class="container-fluid">
<div class="rows">
    <table id="table"></table>
</div>    
<div class="rows">
    <form action="">
        <div class="row">
            <div class="col-md-3">
            <div class="form-group">
                    <label for="exampleInputName2">参数1</label>
                   <input type="text" class="form-control" id="tb_1"  placeholder="参数1">
             </div>
             </div>
             <div class="col-md-3">
            <div class="form-group">
                    <label for="exampleInputName2">参数2</label>
                   <input type="text" class="form-control"  id="tb_2" placeholder="参数2">
             </div>
             </div>
             <div class="col-md-3">
            <div class="form-group">
                    <label for="exampleInputName2">参数3</label>
                   <input type="text" class="form-control" id="tb_3"  placeholder="参数1">
             </div>
             </div>
             <div class="col-md-3">
            <div class="form-group">
                    <label for="exampleInputName2">参数4</label>
                   <input type="text" class="form-control"  id="tb_4" placeholder="参数2">
             </div>
             </div>
        </div>
        <div class="row">
            <div class="col-md-6">
            <button type="submit" class="btn btn-default">提交</button>
            </div>
            <div class="col-md-6">
            <button type="button" class="btn btn-default" onclick="f2()">重置</button>
            </div>
        </div>
    </form>
</div>
</div>    
</body>
</html>

猜你喜欢