이 섹션에서는 주로 Bootstrap의 배경데이터 바인딩, 특수 열 처리 및 열 정렬 기능을 소개합니다. 코드는 간단하고 이해하기 쉽고 매우 좋으며 필요한 친구가 참조할 수 있습니다
.이 섹션에서는 주로 Bootstrap의 백그라운드 데이터 바인딩, 특수 열 처리 및 열 정렬 기능을 소개합니다.
1. 데이터 바인딩
일반적으로 프로그래밍을 하며, 데이터를 직접 바인딩하기 위해 json 파일을 거의 사용하지 않습니다. 기본적으로 우리는 프로그래밍 언어를 사용하여 데이터를 얻고 데이터 바인딩을 수행합니다.
Place a Table control
<table id="table" ></table>
<script > $('#table').bootstrapTable({ url: 'tablejson.jsp', //数据绑定,后台的数据从jsp代码 search:true, uniqueId:"Id", pageSize:"5", pageNumber:"1", sidePagination:"client", pagination:true, height:'400', columns: [ { field: 'Id', title: '中文' }, { field: 'Name', title: 'Name' } , { field: 'Desc', title: 'Desc' } ], });
코드 호출 2. 특수 열 처리
실제 응용 프로그램에서는 연산 열과 같은 특수 열을 추가해야 합니다. 다음 js 코드는 특수 열
{ field: '#', title: 'control',formatter:function(value,row,index){ var del='<a href="Delete!delete.action?Id='+row.Id+'" rel="external nofollow" rel="external nofollow" >删除</a>'; var updt='<a href="supdate.jsp?Id='+row.Id+'" rel="external nofollow" rel="external nofollow" >修改</a>'; var add='<a href="Include.jsp?Id='+row.Id+'" rel="external nofollow" rel="external nofollow" >增加</a>' return del+" "+updt+" "+add; } }
를 추가합니다. js 코드는