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

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

WBOY

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

원래의

1337명이 탐색했습니다.

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

< ;본문>