高潮爽死抽搐白浆gif视频,国产,欧美,日韩,亚洲一区二区三区

国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

jQuery仿Excel表格編輯功能的實(shí)現(xiàn)代碼_jquery

php中文網(wǎng)

發(fā)布： 2016-05-16 17:34:51

原創(chuàng)

1442人瀏覽過

　　在 Excel 中可進(jìn)行的操作，你幾乎都可以在網(wǎng)頁中做到，如拖動(dòng)復(fù)制、Ctrl+C 、Ctrl+V 等等。

　　另外在瀏覽器支持方面，它支持以下的瀏覽器 IE7+, FF, Chrome, Safari, Opera。

如何使用：
???? 首先在頁面中引入 jQuery 框架和 Handsontable 插件的相關(guān) JS 和 CSS 文件，以下列出的兩個(gè)是必要的，還有其它的是可選的，如果需要某個(gè)功能時(shí)就（參看demo）加上。

復(fù)制代碼代碼如下:

??? 
??? 
??? 

　　然后添加一個(gè)用于呈現(xiàn) Excel 編輯表格的 DIV 層

復(fù)制代碼代碼如下:

　　最后就可以對其進(jìn)行初始化了

復(fù)制代碼代碼如下:

//數(shù)據(jù)
??????????? 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, //自動(dòng)完成
????????????????? source: ["yellow", "red", "orange", "green", "blue", "gray", "black", "white"] //數(shù)據(jù)源
??????????????? }
????????????? ],
????????????? cells: function (row, col, prop) {
??????????????? if (row === 0 && col === 0) {
????????????????? return {type: {renderer: greenRenderer}};
??????????????? }
????????????? }
??????????? });

注意是div容器加載完了之后進(jìn)行初始化：

demo代碼：

復(fù)制代碼代碼如下:

??? 
??? Basic Demo
??? 
??? 
??? 
??? <script><BR>        $(function(){<BR>            //數(shù)據(jù)<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, //自動(dòng)完成<BR>                  source: ["yellow", "red", "orange", "green", "blue", "gray", "black", "white"] //數(shù)據(jù)源<BR>                }<BR>              ],<BR>              cells: function (row, col, prop) {<BR>                if (row === 0 && col === 0) {<BR>                  return {type: {renderer: greenRenderer}};<BR>                }<BR>              }<BR>            });<BR>        });<BR>    </script>


??? 