EasyUI編集セル拡張メソッドショートカットがトリガーされ、上下キーで行を選択します.セルをクリックして編集を開始し、キーボードの上下キーtabキーshiftで編集したセルを切り替えます
12471 ワード
この拡張方法は、公式サイトで提供されている表編集セルの機能をさらに拡張し、キーボードショートカットの操作を加えます.編集を開始していない場合は、キーボードの上下キーを押すことで選択した行 を切り替えることができます.セルをクリックしてセルの編集を開始し、キーボード↑キーを押すと、編集可能なセルは現在のセルの上のセルになり、キーボード↓キーを押すと、編集可能なセルは現在のセルの下のセルになり、キーボードTabキーを押すと、編集可能なセルは現在のセルの右側のセルになり、キーボードShiftキーを押すと、編集可能なセルが現在のセルの右側のセルになるキーボードEnterキーを押して編集を終了し、上下キー選択列を再出発する機能 .
Document
// data
var data = [
{
productid: "FI-SW-01",
productname: "Koi",
unitcost: "10",
status: "P",
listprice: "36.5",
attr1: "Large",
itemid: "EST-1"
},
{
productid: "FI-SW-01",
productname: "Koi",
unitcost: "10",
status: "P",
listprice: "36.5",
attr1: "Large",
itemid: "EST-1"
},
{
productid: "FI-SW-01",
productname: "Koi",
unitcost: "10",
status: "P",
listprice: "36.5",
attr1: "Large",
itemid: "EST-1"
},]
$.extend($.fn.datagrid.methods, {
// ， [http://www.jeasyui.net/extension/202.html][1]
editCell: function (jq, param) {
return jq.each(function () {
var opts = $(this).datagrid('options');
var fields = $(this).datagrid('getColumnFields', true).concat($(this).datagrid('getColumnFields'));// ，
for (var i = 0; i < fields.length; i++) {
var col = $(this).datagrid('getColumnOption', fields[i]);
col.editor1 = col.editor;
if (fields[i] != param.field) {
col.editor = null;
}
}
$(this).datagrid('beginEdit', param.index);
for (var i = 0; i < fields.length; i++) {
var col = $(this).datagrid('getColumnOption', fields[i]);
col.editor = col.editor1;
}
});
},
//
keyCtrLine:function(jq){
var elem=jq.selector// datagrid id
var dg = $("#"+elem.replace("#",''));
$(document).unbind("keydown");//
// ， ，
$(document).bind('keydown', function (e) {
if(editIndex==undefined){
switch (e.keyCode) {
case 38: // up
var selected = dg.datagrid('getSelected');
if (selected) {
var index = dg.datagrid('getRowIndex', selected);
// 0， 0
if(index != 0){
dg.datagrid('selectRow', index - 1);
}
} else {
var rows = dg.datagrid('getRows');
dg.datagrid('selectRow', rows.length - 1);
}
break;
case 40: // down
var selected = dg.datagrid('getSelected');
if (selected) {
var index = dg.datagrid('getRowIndex', selected);
var rows = dg.datagrid('getRows');
if(index < (rows.length-1)){
dg.datagrid('selectRow', index + 1);
}else {
dg.datagrid('selectRow', 0);
}
}else {
var rows = dg.datagrid('getRows');
dg.datagrid('selectRow',0);
}
break;
}
}
});
},
//
keyCtrCell: function (jq) {
var elem=jq.selector
var dg = $("#"+elem.replace("#",''));
var allFields = dg.datagrid('getColumnFields');
$(document).unbind("keydown");
$(document).bind('keydown', function (e) {
console.log(e.keyCode)
if(editIndex!=undefined){
switch (e.keyCode) {
case 38: // up ↑
//
if(editIndex != 0){
dg.datagrid('endEdit', editIndex);
//onClickCell(editIndex-1,editField)
dg.datagrid('editCell', { index: editIndex-1, field: editField });
editIndex = editIndex-1;
editField = editField;
}
break;
case 40: // down ↓
var rows = dg.datagrid('getRows');
//
if(editIndex < (rows.length-1)){
dg.datagrid('endEdit', editIndex);
//onClickCell(editIndex+1,editField)
dg.datagrid('editCell', { index: editIndex+1, field: editField });
editIndex = editIndex+1;
editField = editField;
}
break;
case 16://left shift
//
if(editField!=allFields[0]){
var i=allFields.indexOf(editField);
dg.datagrid('endEdit', editIndex);
dg.datagrid('editCell', { index: editIndex, field: allFields[i-1] });
editIndex = editIndex;
editField = allFields[i-1];
// onClickCell(editIndex,allFields[i-1]);
}
break;
case 9://right tab
//
if(editField!=allFields[allFields.length-1]){
var i=allFields.indexOf(editField);
dg.datagrid('endEdit', editIndex);
dg.datagrid('editCell', { index: editIndex, field: allFields[i+1] });
editIndex = editIndex;
editField = allFields[i+1];
//onClickCell(editIndex,allFields[i+1]);
}
break;
case 13://enter
//
dg.datagrid('endEdit', editIndex);
editIndex = undefined;
editField = undefined;
dg.datagrid("keyCtrLine")
break;
}
}
});
}
});
// ， ID:keyCodeListionDG; :editIndex; :editField;
var editIndex = undefined;
var editField = undefined;
var keyCodeListionDG=undefined;
function endEditing(obj) {
if (editIndex == undefined) { return true }
//validateRow ， true。
if (obj.datagrid('validateRow', editIndex)) {
obj.datagrid('endEdit', editIndex);
editIndex = undefined;
editField = undefined;
return true;
} else {
return false;
}
}
function onClickCell(index, field) {
var dg = $(this);
if (endEditing(dg)) {
dg.datagrid('selectRow', index).datagrid('editCell', { index: index, field: field });
editIndex = index;
editField = field;
keyCodeListionDG=this.id
$("#"+keyCodeListionDG).datagrid("keyCtrCell")
}
}
$(function () {
$("#dg").datagrid({
data: data,
frozenColumns: [[
{ field: "ck", checkbox: true },
]],
iconCls: 'icon-edit',
singleSelect: true,
onClickCell: onClickCell,
onLoadSuccess:function(){
// ，
$("dg").datagrid("keyCtrLine")
}
})
$("#dg1").datagrid({
data: data,
frozenColumns: [[
{ field: "ck", checkbox: true },
]],
iconCls: 'icon-edit',
singleSelect: true,
onClickCell: onClickCell,
onLoadSuccess:function(){
//$("dg1").datagrid("keyCtrLine")
}
})
})
Item ID
Product
List Price
Unit Cost
Attribute
Status
Item ID
Product
List Price
Unit Cost
Attribute
Status