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>
< ;본문>