jQuery imitation Excel table editing function implementation code_jquery

Almost all operations that can be performed in Excel can be performed on the web, such as dragging and copying, Ctrl C, Ctrl V, etc.

In addition, in terms of browser support, it supports the following browsers IE7, FF, Chrome, Safari, Opera.

How to use:
First introduce the jQuery framework and the relevant JS and CSS files of the Handsontable plug-in into the page. The two listed below are necessary, and the others are optional. If you need a certain function Added when needed (see demo).

Copy code The code is as follows:

　Then add a DIV layer for rendering the Excel editing table

Copy code The code is as follows:

< /div>

Finally you can initialize it

Copy code The code is as follows:

//数据
            var data = [
              {id: 1, name: "Ted", isActive: true, color: "orange"},
              {id: 2, name: "John", isActive: false, color: "black"},
              {id: 3, name: "Al", isActive: true, color: "red"},
              {id: 4, name: "Ben", isActive: false, color: "blue"}
            ];
            //黄色渲染方法
            var yellowRenderer = function (instance, td, row, col, prop, value, cellProperties) {
              Handsontable.TextCell.renderer.apply(this, arguments);
              $(td).css({
                background: 'yellow'
              });
            };
            //绿色渲染方法
            var greenRenderer = function (instance, td, row, col, prop, value, cellProperties) {
              Handsontable.TextCell.renderer.apply(this, arguments);
              $(td).css({
                background: 'green'
              });
            };
            //初始化
            var $container = $("#example1");
            $container.handsontable({
              data: data,
              startRows: 5,
              colHeaders: true,
              minSpareRows: 1,
              columns: [
                {data: "id"},
                {data: "name", type: {renderer: yellowRenderer}}, //黄色渲染
                {data: "isActive", type: Handsontable.CheckboxCell}, //多选框
                {data: "color",
                  type: Handsontable.AutocompleteCell, //自动完成
                  source: ["yellow", "red", "orange", "green", "blue", "gray", "black", "white"] //数据源
                }
              ],
              cells: function (row, col, prop) {
                if (row === 0 && col === 0) {
                  return {type: {renderer: greenRenderer}};
                }
              }
            });

Note that the div container is initialized after loading:

Demo code:

Copy code The code is as follows:

   
   
   
   
   
    <script><br>        $(function(){<br>            //数据<br>            var data = [<br>              {id: 1, name: "Ted", isActive: true, color: "orange"},<br>              {id: 2, name: "John", isActive: false, color: "black"},<br>              {id: 3, name: "Al", isActive: true, color: "red"},<br>              {id: 4, name: "Ben", isActive: false, color: "blue"}<br>            ];<br>            //黄色渲染方法<br>            var yellowRenderer = function (instance, td, row, col, prop, value, cellProperties) {<br>              Handsontable.TextCell.renderer.apply(this, arguments);<br>              $(td).css({<br>                background: 'yellow'<br>              });<br>            };<br>            //绿色渲染方法<br>            var greenRenderer = function (instance, td, row, col, prop, value, cellProperties) {<br>              Handsontable.TextCell.renderer.apply(this, arguments);<br>              $(td).css({<br>                background: 'green'<br>              });<br>            };<br>            //初始化<br>            var $container = $("#example1");<br>            $container.handsontable({<br>              data: data,<br>              startRows: 5,<br>              colHeaders: true,<br>              minSpareRows: 1,<br>              columns: [<br>                {data: "id"},<br>                {data: "name", type: {renderer: yellowRenderer}}, //黄色渲染<br>                {data: "isActive", type: Handsontable.CheckboxCell}, //多选框<br>                {data: "color",<br>                  type: Handsontable.AutocompleteCell, //自动完成<br>                  source: ["yellow", "red", "orange", "green", "blue", "gray", "black", "white"] //数据源<br>                }<br> ],<br> セル: function (row,col, prop) {<br> if (row === 0 &&col === 0) {<br> return {type: {renderer : greenRenderer}} ;<br> }<br> }<br> });<br> });<br> </script>

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn