찾다

집 >웹 프론트엔드 >JS 튜토리얼 >JavaScript BootStrap 테이블 백그라운드 데이터 바인딩, 특수 열 처리 및 정렬 기능에 대한 자세한 설명

JavaScript BootStrap 테이블 백그라운드 데이터 바인딩, 특수 열 처리 및 정렬 기능에 대한 자세한 설명

黄舟
黄舟원래의
2017-05-28 10:29:352240검색

이 섹션에서는 주로 Bootstrap의 배경데이터 바인딩, 특수 열 처리 및 열 정렬 기능을 소개합니다. 코드는 간단하고 이해하기 쉽고 매우 좋으며 필요한 친구가 참조할 수 있습니다

.

이 섹션에서는 주로 Bootstrap의 백그라운드 데이터 바인딩, 특수 열 처리 및 열 정렬 기능을 소개합니다.

1. 데이터 바인딩

일반적으로 프로그래밍을 하며, 데이터를 직접 바인딩하기 위해 json 파일을 거의 사용하지 않습니다. 기본적으로 우리는 프로그래밍 언어를 사용하여 데이터를 얻고 데이터 바인딩을 수행합니다.

Place a Table control

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

javascript

<script >
$(&#39;#table&#39;).bootstrapTable({
  url: &#39;tablejson.jsp&#39;,  //数据绑定，后台的数据从jsp代码
  search:true,      
  uniqueId:"Id",
  pageSize:"5",
  pageNumber:"1",
  sidePagination:"client",
  pagination:true,
  height:&#39;400&#39;,
  columns: [
  {
    field: &#39;Id&#39;,
    title: &#39;中文&#39;
  }, {
    field: &#39;Name&#39;,
    title: &#39;Name&#39;
  }
  , {
    field: &#39;Desc&#39;,
    title: &#39;Desc&#39;
  }
  ],
});

코드 호출 2. 특수 열 처리

실제 응용 프로그램에서는 연산 열과 같은 특수 열을 추가해야 합니다. 다음 js 코드는 특수 열 

{
    field: &#39;#&#39;,
    title: &#39;control&#39;,formatter:function(value,row,index){
    var del=&#39;<a href="Delete!delete.action?Id=&#39;+row.Id+&#39;" rel="external nofollow" rel="external nofollow" >删除</a>&#39;;
    var updt=&#39;<a href="supdate.jsp?Id=&#39;+row.Id+&#39;" rel="external nofollow" rel="external nofollow" >修改</a>&#39;;
    var add=&#39;<a href="Include.jsp?Id=&#39;+row.Id+&#39;" rel="external nofollow" rel="external nofollow" >增加</a>&#39;
    return del+" "+updt+"&nbsp"+add;
    }
  }

를 추가합니다. js 코드는