jQuery 모방 Excel 테이블 편집 기능 구현 code

jQuery 모방 Excel 테이블 편집 기능 구현 code_jquery

WBOY

풀어 주다： 2016-05-16 17:34:51

원래의

1296명이 탐색했습니다.

드래그, 복사, Ctrl C, Ctrl V 등 엑셀에서 할 수 있는 거의 모든 작업을 웹에서도 할 수 있습니다.

또한 브라우저 지원 측면에서 IE7, FF, Chrome, Safari, Opera 등의 브라우저를 지원합니다.

사용 방법:
먼저 jQuery 프레임워크와 Handsontable 플러그인의 관련 JS 및 CSS 파일을 페이지에 소개합니다. 아래 나열된 두 가지는 필수이고 나머지는 특정 항목이 필요한 경우입니다. 기능이 필요할 때 추가됩니다(데모 참조).

코드 복사 코드는 다음과 같습니다.

　그런 다음 Excel 편집 테이블을 렌더링하기 위한 DIV 레이어 를 추가합니다.

코드 복사 코드는 다음과 같습니다.

드디어 초기화할 수 있습니다

코드 복사 코드는 다음과 같습니다.

//数据
            var data = [
              {id: 1, name: "Ted", isActive: true, color: "orange"},
              {id: 2, name : "John", isActive: false, 색상: "검정색"},
              {id: 3, 이름: "Al", isActive: true, 색상: "red"},
              {id: 4, 이름 : "Ben", isActive: false, 색상: "blue"}
            ];
            //黄color渲染방법
            var yellowRenderer = 함수(인스턴스, td, row, col, prop, value, cellProperties) {
              Handsontable.TextCell.renderer.apply(this, 인수);
              $(td).css({
               배경: '노란색'
              });
            };
// 绿色渲染方法 var greenrenderer = function (instance, td, row, col, prop, value, cellproperties) { handsontable.textcell.render.apply (this, arguments);
$ (td ).css({
               배경: '녹색'
             });
           };
           //初始化
            var $contain er = $("#example1");
            $container .handsontable({
              data: data,
              startRows: 5,
              colHeaders: true,
              minSpareRows:
              열: [
                {데이터: "id"},
               {data: "name", 유형: {renderer: yellowRenderer}}, //黄color渲染
               {data: "isActive", 유형: Handsontable.CheckboxCell}, //多选框
                {데이터: "color",
                  유형: Handsontable.AutocompleteCell, //自动完成
                 소스: ["노란색", "빨간색", "주황색", "녹색", "파란색", "회색", "검은색" , "white"] //数据源
               }
             ],
              셀: 함수(행, 열, 소품) {
                if (행 === 0 && 열 === 0) {
                 return {type: {renderer: greenRenderer}};
               }
             }
            });

div 컨테이너는 로드 후 초기화됩니다.

데모 코드:

코드 복사 코드는 다음과 같습니다.

    <제목>기본 데모< ;/title>

    <script><br>        $(function(){<br>            //数据<br>            var data = [<br>              {id: 1, 이름: "Ted", isActive: true, 색상: "주황색"},<br>              {id: 2, 이름: "John", isActive: false, 색상: "검은색" "},<br>              {id: 3, 이름: "Al", isActive: true, 색상: "red"},<br>              {id: 4, 이름: "Ben", isActive: false, 색상: "blue "}<br>            ];<br>            //黄color渲染방법<br>            var yellowRenderer = function(instance, td, row, col, prop, value, cellProperties) {<br>             TextCell.renderer.apply(이것은 , 인수);<br>             $(td).css({<br>               배경: '노란색'<br>            });<br>           };<br>            //绿color渲染방법<br>            var greenRenderer = 함수( 인스턴스, td, 행, col, 소품, 값, cellProperties) {<br>              Handsontable.TextCell.renderer.apply(this, 인수);<br>              $(td).css({<br>               배경: '녹색' <br>             });<br>            };<br>            //初始化<br>           var $container = $("#example1");<br>            $container. Handsontable({<br>              데이터: 데이터,<br>> "id"},<br>                {데이터: "이름", 유형: {렌더러 : yellowRenderer}}, //黄color渲染<br>                {data: "isActive", type: Handsontable.CheckboxCell}, //多选框<br>               {data: "color",<br>                 유형: sontable.AutocompleteCell, //자체完成<br>                  출처: ["노란색", "빨간색", "주황색", "녹색", "파란색", "회색", "검은색", "흰색"] //数据源<br>                }<br>              ],<br>              셀: 함수(행, 열, 소품) {<br>              if (row === 0 && col === 0) {<br>                 return {type: 어: greenRenderer}} ;<br>               }<br>             }<br>           });<br>        });<br>    </script>

< ;본문>