이번에는 Bootstrap에서 테이블을 조작하는 방법과 Bootstrap에서 테이블을 조작할 때 주의사항이 무엇인지 알려드리겠습니다. 실제 사례를 살펴보겠습니다.
bootstrap-table은 bootstrap-table을 기반으로 작성되었으며, 데이터 표시에 특별히 사용되는 테이블 플러그인입니다. 그리고 부트스트랩은 다음에서 비롯됩니다. Twitter는 현재 가장 인기 있는 프런트엔드 프레임워크입니다. 부트스트랩은 HTML, CSS, JAVASCRIPT를 기반으로 하며 단순성, 유연성 및 신속한 프런트엔드 개발이라는 장점을 가지고 있습니다. 여기서는 부트스트랩과 부트스트래핑을 설명하지 않겠습니다. 이 기사에서는 내 프로젝트에서 부트스트랩 테이블 사용에 대한 이해와 이를 배우는 방법을 설명하는 데 중점을 둘 것입니다.
먼저 jquery, bootstrap, bootstrap-table에 대해 설명하겠습니다. 세 사람의 관계. 부트스트랩 코드의 많은 부분에 jquery가 포함되어 있습니다. Bootstrap은 jquery를 기반으로 하며 우리가 사용하려는 bootstrap-table은 bootstrap을 기반으로 생성되므로 bootstrap-table을 사용하기 전에 jquery 및 bootstrap과 관련된 js, css 파일을 참조해야 합니다.
다음으로 bootstrap-table의 특징은 jquery-ui, jqgrid 및 기타 테이블 표시 플러그인과 비교할 때 bootstrap-table이 단순하고 가볍다는 점입니다. 일부 가벼운 데이터 표시에는 충분하지만 상위-하위 테이블의 경우에는 등등. 지원도 매우 좋고, 가장 중요한 것은 다른 부트스트랩 태그와 원활하게 결합될 수 있다는 것입니다.
1. js와 css를 소개합니다
<!--css样式--> <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap/bootstrap-table.css" rel="stylesheet"> <!--js--> <script src="js/bootstrap/jquery-1.12.0.min.js" type="text/javascript"></script> <script src="js/bootstrap/bootstrap.min.js"></script> <script src="js/bootstrap/bootstrap-table.js"></script> <script src="js/bootstrap/bootstrap-table-zh-CN.js"></script>
2. 테이블 데이터 채우기
bootStrap 테이블에서 데이터를 얻는 방법은 두 가지가 있습니다. 하나는 테이블의 data-url 속성을 통해 데이터 소스를 지정하는 것이고, 다른 하나는 JavaScript
<table data-toggle="table"> <thead> ... </thead> </table> ...
$('#table').bootstrapTable({ url: 'data.json' });
를 통해 테이블을 초기화할 때 url을 지정하여 데이터를 얻는 것입니다. 두 번째 방법은 복잡한 데이터를 처리할 때 첫 번째 방법보다 더 유연합니다. 두 번째 방법은 일반적으로 테이블 데이터를 채우는 데 사용됩니다.
rreee필드 필드는 데이터를 표시하기 위해 서버가 반환한 필드와 일치해야 합니다.
3. 백그라운드에서 데이터 획득
a. 서블릿이 데이터를 가져옵니다
$(function () { //1.初始化Table var oTable = new TableInit(); oTable.Init(); //2.初始化Button的点击事件 /* var oButtonInit = new ButtonInit(); oButtonInit.Init(); */ }); var TableInit = function () { var oTableInit = new Object(); //初始化Table oTableInit.Init = function () { $('#tradeList').bootstrapTable({ url: '/VenderManager/TradeList', //请求后台的URL(*) method: 'post', //请求方式(*) toolbar: '#toolbar', //工具按钮用哪个容器 striped: true, //是否显示行间隔色 cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) pagination: true, //是否显示分页(*) sortable: false, //是否启用排序 sortOrder: "asc", //排序方式 queryParams: oTableInit.queryParams,//传递参数(*) sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*) pageNumber:1, //初始化加载第一页,默认第一页 pageSize: 50, //每页的记录行数(*) pageList: [10, 25, 50, 100], //可供选择的每页的行数(*) strictSearch: true, clickToSelect: true, //是否启用点击选中行 height: 460, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度 uniqueId: "id", //每一行的唯一标识,一般为主键列 cardView: false, //是否显示详细视图 detailView: false, //是否显示父子表 columns: [{ field: 'id', title: '序号' }, { field: 'liushuiid', title: '交易编号' }, { field: 'orderid', title: '订单号' }, { field: 'receivetime', title: '交易时间' }, { field: 'price', title: '金额' }, { field: 'coin_credit', title: '投入硬币' }, { field: 'bill_credit', title: '投入纸币' }, { field: 'changes', title: '找零' }, { field: 'tradetype', title: '交易类型' },{ field: 'goodmachineid', title: '货机号' },{ field: 'inneridname', title: '货道号' },{ field: 'goodsName', title: '商品名称' }, { field: 'changestatus', title: '支付' },{ field: 'sendstatus', title: '出货' },] }); }; //得到查询的参数 oTableInit.queryParams = function (params) { var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的 limit: params.limit, //页面大小 offset: params.offset, //页码 sdate: $("#stratTime").val(), edate: $("#endTime").val(), sellerid: $("#sellerid").val(), orderid: $("#orderid").val(), CardNumber: $("#CardNumber").val(), maxrows: params.limit, pageindex:params.pageNumber, portid: $("#portid").val(), CardNumber: $("#CardNumber").val(), tradetype:$('input:radio[name="tradetype"]:checked').val(), success:$('input:radio[name="success"]:checked').val(), }; return temp; }; return oTableInit; };
b. 데이터를 얻기 위한 springMvc 컨트롤러의 해당 방법
BufferedReader bufr = new BufferedReader( new InputStreamReader(request.getInputStream(),"UTF-8")); StringBuilder sBuilder = new StringBuilder(""); String temp = ""; while((temp = bufr.readLine()) != null){ sBuilder.append(temp); } bufr.close(); String json = sBuilder.toString(); JSONObject json1 = JSONObject.fromObject(json); String sdate= json1.getString("sdate");//通过此方法获取前端数据 ...
이 기사의 사례를 읽은 후 해당 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:
js는 밀리초 + 일 + 시간 + 분과 초의 변환을 실현합니다
위 내용은 Bootstrap에서 테이블을 작동하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!