지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > JavaScript BootStrap 테이블 백그라운드 데이터 바인딩, 특수 열 처리 및 정렬 기능에 대한 자세한 설명

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

黄舟
풀어 주다： 2017-05-28 10:29:35
원래의
2269명이 탐색했습니다.

이 섹션에서는 주로 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 코드는 


            

                
저자별 최신 기사

                
            

            

                
최신 이슈

                

                                        

                        

                            Bootstrap Vue 체크박스 <b-table> <b-form-checkbox>
                            b-table에 b-form-checkbox를 사용하려고 합니다. 선택한 모듈 ID를 검색해 보세요. <b-tableid="module-table&...
                            

                                

                                     에서 2024-03-31 18:36:11
                                

                                

                                    
  0 

                                    
1

                                    
389

                                

                            

                        

                    

                    

                                    

            


            

                

                    
관련 주제

                    더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿