您的位置：首页 > Web前端 > BootStrap

Bootstrap Table 实现简单的查询和显示功能

2017-08-12 22:39 721 查看

最近用bootstraptable写了一个查询显示的界面。

下面是主要代码：

1. 我引入的css和js

2. jsp的页面代码：

<body>
<div
class="panel panel-default">



<input
type="hidden"
id="basePath"
name="basePath"
value="<%=basePath
%>"/>

<div
class="panel panel-success"
id="main">

<input
type="hidden"
id="message"
name="message"
value="${message }"/>



<div
class="panel-heading">



<h3
class="panel-title">信息查询</h3>

</div>



<div
class="panel-body">

<div
class="title">



<div
class="announce-info">

<form
action="<%=basePath
%>/table/page"
method="post">

<table
class="table table-bordered">

<tbody>

<tr>

          <td
class="heading">协议单位编码</td>

<td>

<div
class="form-group">

<input
type="text"
class="form-control"
id="PROTOCOL_CODE"
name="PROTOCOL_CODE"
value="${pb.PROTOCOL_CODE}"/>

</div>

</td>

<td
class="heading">协议单位名称</td>

<td>

<div
class="form-group">

<input
type="text"
class="form-control"
id="PROTOCOL_NAME"
name="PROTOCOL_NAME"
value="${pb.PROTOCOL_NAME}"/>

</div>

</td>

          </tr>

<tr>

<td
class="heading">开业时间</td>

<td>

<div
class="form-group">

<input
type="date"
class="form-control"
id="startTime"
name="startTime"
/>

                 

</div>

</td>

                             <td
class="heading">至</td>

<td>

<div
class="form-group">

<input
type="date"
class="form-control"
id="endTime"
name="endTime"
/>



</div>

                             </td>

</tr>

<tr>

<td
class="heading">协议单位状态</td>

<td
class="heading">

<div
class="form-group">

<input
type="text"
class="form-control"
id="PROTOCOL_STATUS"
name="PROTOCOL_STATUS"
value="${pb.OPEN_DATE}"/>

</div>

</td>

                    <td
class="heading">协议单位类型</td>

<td>

<div
class="form-group">

<select
class="form-control"
id="PROTOCOL_TYPE"
name="PROTOCOL_TYPE"
>

           <option
value="${pb.PROTOCOL_TYPE }"></option>

<option
value="非直营二网">非直营二网</option>

<option
value="二手车零售店">二手车零售店</option>

     <option
value="展厅">展厅</option>

<option
value="快修/社区店">快修/社区店</option>

</select>

</div>

</td>

                   </tr>

<tr>



<td
colspan="4"
class="heading">

<button
type="submit"
class="btn btn-default btn-sm"><i
class="fa fa-search fa-large"></i>查询</button>

<button
type="reset"
class="btn btn-default btn-sm"
style="
margin-right:
30px;"><i
class="fa fa-undo fa-large"></i>重置</button>

</td>


</tr>

</tbody>

</table>

</form>

</div>

</div>

</div>

<table
id="table"></table>

</div>

</div>
</body>

3. 下面是js中的代码：

$(function () {
alert("jsa");

//1.初始化Table

var oTable =
new TableInit();

oTable.Init();

var message = document.getElementById("message").value;

if(message !=
null &&message !=
"" ){

alert(message);

}
});

var TableInit =
function () {

var oTableInit =
new Object();

//初始化Table



var basePath=$("#basePath").val();

alert(basePath);

oTableInit.Init = function () {

$('#table').bootstrapTable({

    method: 'post',

contentType: "application/x-www-form-urlencoded",

url: basePath+'/table/init',
//请求后台的URL（*）

toolbar: '#toolbar',
                           //工具按钮用哪个容器

striped: true,
//是否显示行间隔色



locale:'zh-CN',
    //中文支持

pagination: true,
//是否开启分页（*）

pageNumber:1,
//初始化加载第一页，默认第一页

pageSize: 7,
//每页的记录行数（*）

pageList: [5,7,9],
//可供选择的每页的行数（*）

sidePagination: "server",
//分页方式：client客户端分页，server服务端分页（*）



showRefresh:true,
//刷新按钮

queryParams: oTableInit.queryParams,
//传递参数（*）

strictSearch: true,

showColumns: true,
                       //是否显示所有的列

showRefresh: true,
                       //是否显示刷新按钮

minimumCountColumns: 2,                                //最少允许的列数

clickToSelect: true,
//是否启用点击选中行





height: 500,                                                    //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度

uniqueId: "PROTOCOL_ID",
                           //每一行的唯一标识，一般为主键列

showToggle:true,
                       //是否显示详细视图和列表视图的切换按钮

cardView: false,
                                         //是否显示详细视图

detailView: false,
                          //是否显示父子表

columns: [{

field: 'PROTOCOL_CODE',


title: '协议单位编码',


}, {

field: 'PROTOCOL_NAME',

align: 'center',

title: '协议单位名称'

}, {

field: 'PROTOCOL_TYPE',

align: 'center',

title: '协议单位类型',

}, {

field: 'PROTOCOL_STATUS',

             align: 'center',

title: '协议单位状态',

}, {

field: 'timeStr',

title: '开业日期',

align: 'center',



}, {

field: 'ADDR',

title: '联系地址',

align: 'center',



}, {

field: 'MANAGER_TEL',

title: '店长电话',

align: 'center',



}, {

field: 'EMAIL',

       title: '邮箱',

align: 'center',

}, {

field: 'publisher',

title: '店长姓名',

align: 'center',



}, {

title: '操作',

align: 'center',

formatter:function(value,row,index){


    var update =
'<a href="javascript:update(\''+ row.PROTOCOL_ID +
'\')">修改</a> ';

    var del =
'<a href="javascript:dlt(\''+ row.PROTOCOL_ID +
'\')">删除</a> ';

               return update+del;


}

}]

});

};


//得到查询的参数

oTableInit.queryParams = function (params) {

var temp = {
//这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的

limit: params.limit,   //页面大小

         offset: params.offset, //偏移量

docNo: $("#PROTOCOL_CODE").val(),

title: $("#PROTOCOL_NAME").val(),

startTime: $("#startTime").val(),

endTime: $("#endTime").val(),

brand: $("#PROTOCOL_STATUS").val(),

important: $("#PROTOCOL_TYPE").val()

};

return temp;

};

return oTableInit;
};

function dlt(id)
{

var basePath = $("#basePath").val();

var url = basePath+"/table/delete?PROTOCOL_ID="+id;

window.location.href=url;
}

function update(id)
{

var basePath = $("#basePath").val();

window.location.href=basePath+"/table/toupdate?PROTOCOL_ID="+id;
}

4. 后台controller中的代码：

@RequestMapping(value =
"/init")

publicvoid init(ProtocolBean
pb,HttpServletRequest
request, HttpServletResponse
response)
throws SQLException, IOException {


intlimit = Integer.parseInt(request.getParameter("limit"));//
页面大小

intoffset = Integer.parseInt(request.getParameter("offset"));
// 偏移量

Map<String, Object> condition =
new HashMap<String, Object>();

        if (pb.getPROTOCOL_CODE()!=
null)

        {

            condition.put("PROTOCOL_CODE",
pb.getPROTOCOL_CODE());

        }

        if (pb.getPROTOCOL_NAME()!=
null)

        {

            condition.put("PROTOCOL_NAME",
pb.getPROTOCOL_NAME());

        }

        if (pb.getStartTime()!=
null)

        {

            condition.put("startTime",
pb.getStartTime());

        }

        //判断发文终止时间

        if (pb.getEndTime()!=
null)

        {

            condition.put("endTime",
pb.getEndTime());

        }

        if (pb.getPROTOCOL_STATUS()!=
null)

        {

            condition.put("PROTOCOL_STATUS",pb.getPROTOCOL_STATUS()
);

        }

        if (pb.getPROTOCOL_TYPE()!=
null)

        {

            condition.put("PROTOCOL_TYPE",
pb.getPROTOCOL_TYPE());

        }

        condition.put("limit",
limit);

        condition.put("offset",
offset);

        System.out.println("init3======");

        System.out.println(condition);

// 2. 查询数据

List<ProtocolBean> list =
protocolMapper.queryByCondition(condition);



if(list.isEmpty())

{

System.out.println("isEmpty======");

}

// 4.把数据转化成json格式

JSONArray array = JSONArray.fromObject(list);


// 5.获取总页数

Integer pageCount =
protocolMapper.queryCount();


// 6.需要返回的数据有总记录数和行数据

String json =
"{\"total\":" +
pageCount +
",\"rows\":" +
array +
"}";

PrintWriter pw =
response.getWriter();

pw.print(json);
    }

下面是我的前台运行结果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航