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

드래그, 복사, 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>

< ;본문>