JavaScript만으로 Excel 스타일을 쉽게 편집할 수 있는 스프레드시트를 사용자 정의해 보았습니다.
15636 단어 jexceldatalistJavaScript
입문
이번 제이셀.js에서 시도한 일은 다음과 같다.
• 스프레드시트 보기
• 스프레드시트에 대한 옵션 이벤트 설정
열 유형 설정
■ 셀에 후보 입력 표시 사용자 정의
스프레드시트 보기
jexcel.CSS와 JS는 모두 CDN에서 js를 사용할 수 있다.
jexcel.js의 사용은 jsuites입니다.js는 필수입니다.
이번에는 jQuery로 썼기 때문에 jQuery도 읽었습니다.
index.html<!-- CSS -->
<link rel="stylesheet" href="https://bossanova.uk/jexcel/v4/jexcel.css" type="text/css" />
<link rel="stylesheet" href="https://bossanova.uk/jsuites/v3/jsuites.css" type="text/css" />
index.html<!-- JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://bossanova.uk/jexcel/v4/jexcel.js"></script>
<script src="https://bossanova.uk/jsuites/v3/jsuites.js"></script>
<script src="js/script.js"></script>
HTML에 필요한 것은 스프레드시트를 삽입할 위치에 ID를 부여한 div를 배치하는 것뿐입니다!
index.html<body>
<h1>jExcelTEST</h1>
<div id="spreadsheet"></div>
</body>
JS는 JSON 기술 옵션으로 ID를 부여하는 div 호칭 방법입니다!
minDimensions×몇 개의 표로 표시할 것인지 지정하면 스프레드시트를 먼저 표시할 수 있습니다.
script.jsvar options = {
minDimensions : [10,10], //10×10
}
var table = $('#spreadsheet').jexcel(options);
이 상태에서는 입력, 복사, 자동 채우기 등의 Excellic으로 편집할 수 있습니다.
스프레드시트 옵션 이벤트 설정
JSON에 선택적 매개변수를 추가하면 전체 스프레드시트에 대해 다양한 설정을 수행할 수 있습니다.
script.jsvar options = {
minDimensions : [10,10],
columnSorting:false, // ヘッダーをダブルクリックしてソートする機能の無効化
allowInsertRow:false, // 行を挿入を禁止
allowManualInsertRow:false, // ユーザーによる行の挿入を禁止
allowInsertColumn:false, // 列の挿入を禁止
allowManualInsertColumn:false, // ユーザーによる列の挿入を禁止
allowDeleteRow:false, // 行の削除を禁止
allowDeleteColumn:false, // 列の削除を禁止
selectionCopy: false, // 後述のチェックボックスなどの選択はコピー禁止（文字列・数値のコピーはできる）
}
var table = $('#spreadsheet').jexcel(options);
이런 느낌으로 파라미터를 추가하면 편집에 제한이 있는 스프레드시트도 간단하게 사용자 정의할 수 있다.
상술한 매개 변수는 단지 일부분일 뿐이다
이외에 공식빠른 참조의 3.INITIALIZATION에 다 적혀있어요.
또한 활동을 사용하면 더욱 작은 제어도 할 수 있다.
예를 들어 짝수열 복제품만 금지하고 싶을 때
script.jsvar options = {
minDimensions:[10,10],
onbeforepaste:function(instance, cell, x, y, value){
if(x % 2 == 0){
return false
}
}
}
var table = $('#spreadsheet').jexcel(options);
붙여넣기 전에 호출되는 이벤트를 정의하여 열을 확인하고 붙여넣기를 금지할 수 있습니다.
지정한 붙여넣기 값이 가짜인 경우 이 이벤트 반환 값은 붙여넣지 않습니다.
이외에도 공식 행사빠른 참조의 2.이벤트에 다 적혀있어요.
열 유형 설정
jexcel은 문자열 이외의 형식도 제공합니다.
각 열의 유형을 지정하여 서로 다른 유형의 문자 입력을 금지할 수 있습니다.
script.jsvar columns = [
{type:'checkbox',width:30}, //A列：チェックボックス：幅30px指定
{type:'numeric',mask:'#,##.00',decimal:'.',width:100}, //B列：数値：三桁ごとにカンマ、少数第二位まで(以下切り捨て)、少数点は'.'を指定：幅100px指定
{type:'text',,width:100}, //C列：テキスト:幅100px指定
{type:'calendar',,width:100}, //D列：日時:幅100px指定
{type:'numeric', mask:'##',,width:100} //E列：数値：カンマなし、整数のみ:幅100px指定
]
var options = {
minDimensions:[5,10],
columns:columns
}
var table = $('#spreadsheet').jexcel(options);
수치도 비트와 표를 상세하게 설정할 수 있고 날짜 지정도 달력에서 입력할 수 있어 편리하다.
선택 상자, 색 선택, 그리고 다른 라이브러리와의 협력을 통해 더욱 사용자 정의할 수 있을 것 같다인용하다
셀에 후보 표시 사용자 정의
이것은 이 보도에서 가장 쓰고 싶은 것이다!
나는 자유문 입력도 가능하고 후보에서 선택할 수 있는 HTML <datalist> 같은 일을 하고 싶다
jexcel은 그런 유형을 준비하지 않았습니다.
참고로 유상 버전이라면 추가 선택 상자의 옵션이 있는 것 같다인용하다
하지만 이번에는 유형은 텍스트입니다. 입력 후보를 표시하고 싶습니다!이런 필수 조건이기 때문에 이쪽도 안 어울려요.
나는 jexcel의 칸에 데이터리스트의 입력 후보를 표시하기로 결정했다.
표시할 HTML 측면<datalist>을 입력합니다.
index.html<body>
<h1>jExcelTEST</h1>
<div id="spreadsheet"></div>
</body>
<datalist id="data_list">
<option value="apple"></option>
<option value="orange"></option>
<option value="lemon"></option>
<option value="melon"></option>
</datalist>
JS의 경우 포커스 이벤트를 스프레드시트 셀 (td) 의 input에 추가합니다.
이벤트에서 input 요소에list 속성만 부여하는 일반 데이터리스트의 사용 방법과 같습니다.
script.jsvar options = {
minDimensions:[10,10],
}
var table = $('#spreadsheet').jexcel(options);
$(document).on('focus','.jexcel tbody td input',function(){
$(this).attr('list',`data_list`)
})
셀에 초점을 맞추면 <datalist> 에 정의된 후보 입력이 나타납니다.
문자를 입력해도 해당 후보만 표시
물론 후보 항목을 선택하면 텍스트로 칸을 입력합니다.
이 기능의 구조
jexcel이 단원(td)에 초점을 맞출 때<input type="text"> 단원에서 형성
초점 맞추기를 취소하면 입력 값을 셀 텍스트로 설정합니다
input를 삭제하는 구조이기 때문에 (jexcel.js1832 행 참조~)
input가 존재할 때list 속성을 부여함으로써 입력 후보를 표시할 수 있습니다.
주의사항
iOS 단말기에 데이터리스트를 표시할 수 없는 브라우저가 있는 것 같습니다.
소스와 하위 세대는 없지만 이 경우 입력 후보를 표시할 수 없습니다.
참조: https://mamewaza.com/support/blog/datalist.html
마지막
브라우저에 의존하지 않고 더 스마트한 방법이 있으면 알려주세요!
Reference
이 문제에 관하여(JavaScript만으로 Excel 스타일을 쉽게 편집할 수 있는 스프레드시트를 사용자 정의해 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/maho-m/items/bfe53d8d865d76bcce4c
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
jexcel.CSS와 JS는 모두 CDN에서 js를 사용할 수 있다.
jexcel.js의 사용은 jsuites입니다.js는 필수입니다.
이번에는 jQuery로 썼기 때문에 jQuery도 읽었습니다.
index.html
<!-- CSS -->
<link rel="stylesheet" href="https://bossanova.uk/jexcel/v4/jexcel.css" type="text/css" />
<link rel="stylesheet" href="https://bossanova.uk/jsuites/v3/jsuites.css" type="text/css" />
<!-- JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://bossanova.uk/jexcel/v4/jexcel.js"></script>
<script src="https://bossanova.uk/jsuites/v3/jsuites.js"></script>
<script src="js/script.js"></script>
index.html
<body>
<h1>jExcelTEST</h1>
<div id="spreadsheet"></div>
</body>
minDimensions×몇 개의 표로 표시할 것인지 지정하면 스프레드시트를 먼저 표시할 수 있습니다.
script.js
var options = {
minDimensions : [10,10], //10×10
}
var table = $('#spreadsheet').jexcel(options);
이 상태에서는 입력, 복사, 자동 채우기 등의 Excellic으로 편집할 수 있습니다.
스프레드시트 옵션 이벤트 설정
JSON에 선택적 매개변수를 추가하면 전체 스프레드시트에 대해 다양한 설정을 수행할 수 있습니다.
script.jsvar options = {
minDimensions : [10,10],
columnSorting:false, // ヘッダーをダブルクリックしてソートする機能の無効化
allowInsertRow:false, // 行を挿入を禁止
allowManualInsertRow:false, // ユーザーによる行の挿入を禁止
allowInsertColumn:false, // 列の挿入を禁止
allowManualInsertColumn:false, // ユーザーによる列の挿入を禁止
allowDeleteRow:false, // 行の削除を禁止
allowDeleteColumn:false, // 列の削除を禁止
selectionCopy: false, // 後述のチェックボックスなどの選択はコピー禁止（文字列・数値のコピーはできる）
}
var table = $('#spreadsheet').jexcel(options);
이런 느낌으로 파라미터를 추가하면 편집에 제한이 있는 스프레드시트도 간단하게 사용자 정의할 수 있다.
상술한 매개 변수는 단지 일부분일 뿐이다
이외에 공식빠른 참조의 3.INITIALIZATION에 다 적혀있어요.
또한 활동을 사용하면 더욱 작은 제어도 할 수 있다.
예를 들어 짝수열 복제품만 금지하고 싶을 때
script.jsvar options = {
minDimensions:[10,10],
onbeforepaste:function(instance, cell, x, y, value){
if(x % 2 == 0){
return false
}
}
}
var table = $('#spreadsheet').jexcel(options);
붙여넣기 전에 호출되는 이벤트를 정의하여 열을 확인하고 붙여넣기를 금지할 수 있습니다.
지정한 붙여넣기 값이 가짜인 경우 이 이벤트 반환 값은 붙여넣지 않습니다.
이외에도 공식 행사빠른 참조의 2.이벤트에 다 적혀있어요.
열 유형 설정
jexcel은 문자열 이외의 형식도 제공합니다.
각 열의 유형을 지정하여 서로 다른 유형의 문자 입력을 금지할 수 있습니다.
script.jsvar columns = [
{type:'checkbox',width:30}, //A列：チェックボックス：幅30px指定
{type:'numeric',mask:'#,##.00',decimal:'.',width:100}, //B列：数値：三桁ごとにカンマ、少数第二位まで(以下切り捨て)、少数点は'.'を指定：幅100px指定
{type:'text',,width:100}, //C列：テキスト:幅100px指定
{type:'calendar',,width:100}, //D列：日時:幅100px指定
{type:'numeric', mask:'##',,width:100} //E列：数値：カンマなし、整数のみ:幅100px指定
]
var options = {
minDimensions:[5,10],
columns:columns
}
var table = $('#spreadsheet').jexcel(options);
수치도 비트와 표를 상세하게 설정할 수 있고 날짜 지정도 달력에서 입력할 수 있어 편리하다.
선택 상자, 색 선택, 그리고 다른 라이브러리와의 협력을 통해 더욱 사용자 정의할 수 있을 것 같다인용하다
셀에 후보 표시 사용자 정의
이것은 이 보도에서 가장 쓰고 싶은 것이다!
나는 자유문 입력도 가능하고 후보에서 선택할 수 있는 HTML <datalist> 같은 일을 하고 싶다
jexcel은 그런 유형을 준비하지 않았습니다.
참고로 유상 버전이라면 추가 선택 상자의 옵션이 있는 것 같다인용하다
하지만 이번에는 유형은 텍스트입니다. 입력 후보를 표시하고 싶습니다!이런 필수 조건이기 때문에 이쪽도 안 어울려요.
나는 jexcel의 칸에 데이터리스트의 입력 후보를 표시하기로 결정했다.
표시할 HTML 측면<datalist>을 입력합니다.
index.html<body>
<h1>jExcelTEST</h1>
<div id="spreadsheet"></div>
</body>
<datalist id="data_list">
<option value="apple"></option>
<option value="orange"></option>
<option value="lemon"></option>
<option value="melon"></option>
</datalist>
JS의 경우 포커스 이벤트를 스프레드시트 셀 (td) 의 input에 추가합니다.
이벤트에서 input 요소에list 속성만 부여하는 일반 데이터리스트의 사용 방법과 같습니다.
script.jsvar options = {
minDimensions:[10,10],
}
var table = $('#spreadsheet').jexcel(options);
$(document).on('focus','.jexcel tbody td input',function(){
$(this).attr('list',`data_list`)
})
셀에 초점을 맞추면 <datalist> 에 정의된 후보 입력이 나타납니다.
문자를 입력해도 해당 후보만 표시
물론 후보 항목을 선택하면 텍스트로 칸을 입력합니다.
이 기능의 구조
jexcel이 단원(td)에 초점을 맞출 때<input type="text"> 단원에서 형성
초점 맞추기를 취소하면 입력 값을 셀 텍스트로 설정합니다
input를 삭제하는 구조이기 때문에 (jexcel.js1832 행 참조~)
input가 존재할 때list 속성을 부여함으로써 입력 후보를 표시할 수 있습니다.
주의사항
iOS 단말기에 데이터리스트를 표시할 수 없는 브라우저가 있는 것 같습니다.
소스와 하위 세대는 없지만 이 경우 입력 후보를 표시할 수 없습니다.
참조: https://mamewaza.com/support/blog/datalist.html
마지막
브라우저에 의존하지 않고 더 스마트한 방법이 있으면 알려주세요!
Reference
이 문제에 관하여(JavaScript만으로 Excel 스타일을 쉽게 편집할 수 있는 스프레드시트를 사용자 정의해 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/maho-m/items/bfe53d8d865d76bcce4c
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
var options = {
minDimensions : [10,10],
columnSorting:false, // ヘッダーをダブルクリックしてソートする機能の無効化
allowInsertRow:false, // 行を挿入を禁止
allowManualInsertRow:false, // ユーザーによる行の挿入を禁止
allowInsertColumn:false, // 列の挿入を禁止
allowManualInsertColumn:false, // ユーザーによる列の挿入を禁止
allowDeleteRow:false, // 行の削除を禁止
allowDeleteColumn:false, // 列の削除を禁止
selectionCopy: false, // 後述のチェックボックスなどの選択はコピー禁止（文字列・数値のコピーはできる）
}
var table = $('#spreadsheet').jexcel(options);
var options = {
minDimensions:[10,10],
onbeforepaste:function(instance, cell, x, y, value){
if(x % 2 == 0){
return false
}
}
}
var table = $('#spreadsheet').jexcel(options);
jexcel은 문자열 이외의 형식도 제공합니다.
각 열의 유형을 지정하여 서로 다른 유형의 문자 입력을 금지할 수 있습니다.
script.js
var columns = [
{type:'checkbox',width:30}, //A列：チェックボックス：幅30px指定
{type:'numeric',mask:'#,##.00',decimal:'.',width:100}, //B列：数値：三桁ごとにカンマ、少数第二位まで(以下切り捨て)、少数点は'.'を指定：幅100px指定
{type:'text',,width:100}, //C列：テキスト:幅100px指定
{type:'calendar',,width:100}, //D列：日時:幅100px指定
{type:'numeric', mask:'##',,width:100} //E列：数値：カンマなし、整数のみ:幅100px指定
]
var options = {
minDimensions:[5,10],
columns:columns
}
var table = $('#spreadsheet').jexcel(options);
수치도 비트와 표를 상세하게 설정할 수 있고 날짜 지정도 달력에서 입력할 수 있어 편리하다.
선택 상자, 색 선택, 그리고 다른 라이브러리와의 협력을 통해 더욱 사용자 정의할 수 있을 것 같다인용하다
셀에 후보 표시 사용자 정의
이것은 이 보도에서 가장 쓰고 싶은 것이다!
나는 자유문 입력도 가능하고 후보에서 선택할 수 있는 HTML <datalist> 같은 일을 하고 싶다
jexcel은 그런 유형을 준비하지 않았습니다.
참고로 유상 버전이라면 추가 선택 상자의 옵션이 있는 것 같다인용하다
하지만 이번에는 유형은 텍스트입니다. 입력 후보를 표시하고 싶습니다!이런 필수 조건이기 때문에 이쪽도 안 어울려요.
나는 jexcel의 칸에 데이터리스트의 입력 후보를 표시하기로 결정했다.
표시할 HTML 측면<datalist>을 입력합니다.
index.html<body>
<h1>jExcelTEST</h1>
<div id="spreadsheet"></div>
</body>
<datalist id="data_list">
<option value="apple"></option>
<option value="orange"></option>
<option value="lemon"></option>
<option value="melon"></option>
</datalist>
JS의 경우 포커스 이벤트를 스프레드시트 셀 (td) 의 input에 추가합니다.
이벤트에서 input 요소에list 속성만 부여하는 일반 데이터리스트의 사용 방법과 같습니다.
script.jsvar options = {
minDimensions:[10,10],
}
var table = $('#spreadsheet').jexcel(options);
$(document).on('focus','.jexcel tbody td input',function(){
$(this).attr('list',`data_list`)
})
셀에 초점을 맞추면 <datalist> 에 정의된 후보 입력이 나타납니다.
문자를 입력해도 해당 후보만 표시
물론 후보 항목을 선택하면 텍스트로 칸을 입력합니다.
이 기능의 구조
jexcel이 단원(td)에 초점을 맞출 때<input type="text"> 단원에서 형성
초점 맞추기를 취소하면 입력 값을 셀 텍스트로 설정합니다
input를 삭제하는 구조이기 때문에 (jexcel.js1832 행 참조~)
input가 존재할 때list 속성을 부여함으로써 입력 후보를 표시할 수 있습니다.
주의사항
iOS 단말기에 데이터리스트를 표시할 수 없는 브라우저가 있는 것 같습니다.
소스와 하위 세대는 없지만 이 경우 입력 후보를 표시할 수 없습니다.
참조: https://mamewaza.com/support/blog/datalist.html
마지막
브라우저에 의존하지 않고 더 스마트한 방법이 있으면 알려주세요!
Reference
이 문제에 관하여(JavaScript만으로 Excel 스타일을 쉽게 편집할 수 있는 스프레드시트를 사용자 정의해 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/maho-m/items/bfe53d8d865d76bcce4c
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<body>
<h1>jExcelTEST</h1>
<div id="spreadsheet"></div>
</body>
<datalist id="data_list">
<option value="apple"></option>
<option value="orange"></option>
<option value="lemon"></option>
<option value="melon"></option>
</datalist>
var options = {
minDimensions:[10,10],
}
var table = $('#spreadsheet').jexcel(options);
$(document).on('focus','.jexcel tbody td input',function(){
$(this).attr('list',`data_list`)
})
iOS 단말기에 데이터리스트를 표시할 수 없는 브라우저가 있는 것 같습니다.
소스와 하위 세대는 없지만 이 경우 입력 후보를 표시할 수 없습니다.
참조: https://mamewaza.com/support/blog/datalist.html
마지막
브라우저에 의존하지 않고 더 스마트한 방법이 있으면 알려주세요!
Reference
이 문제에 관하여(JavaScript만으로 Excel 스타일을 쉽게 편집할 수 있는 스프레드시트를 사용자 정의해 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/maho-m/items/bfe53d8d865d76bcce4c
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(JavaScript만으로 Excel 스타일을 쉽게 편집할 수 있는 스프레드시트를 사용자 정의해 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/maho-m/items/bfe53d8d865d76bcce4c텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
