EasyUI編輯單元格擴展方法快捷鍵觸發，上下鍵選擇行。單擊單元格啓動編輯，鍵盤上下鍵tab鍵shift切換編輯的單元格
此擴展方法是在官網提供的表格編輯單元格功能上進行進一步的功能擴展，
加入了鍵盤快捷鍵的操做javascript
- 沒啓動編輯的時候，按下鍵盤上下鍵能夠切換選中的行
- 單擊單元格啓動編輯單元格，
按下鍵盤↑鍵，可編輯的單元格變爲當前單元格上方的單元格
按下鍵盤↓鍵，可編輯的單元格變爲當前單元格下方的單元格
按下鍵盤Tab鍵，可編輯的單元格變爲當前單元格右側的單元格
按下鍵盤Shift鍵，可編輯的單元格變爲當前單元格右側的單元格
按下鍵盤Enter鍵，結束編輯，從新出發上下鍵選擇列的功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 換成您當前項目的對應路徑-->
<link rel="stylesheet" type="text/css" href="easyui/themes/metro/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/mobile.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
//建立數據表格的假數據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")
}
})
})
</script>
</head>
<body>
<table id="dg" class="easyui-datagrid" title="Cell Editing in DataGrid" style="width:700px;height:auto">
<thead>
<tr>
<th data-options="field:'itemid',width:80,editor:'text'">Item ID</th>
<th data-options="field:'productid',width:100,editor:'text'">Product</th>
<th
data-options="field:'listprice',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}">
List Price</th>
<th data-options="field:'unitcost',width:80,align:'right',editor:'numberbox'">Unit Cost</th>
<th data-options="field:'attr1',width:250,editor:'text'">Attribute</th>
<th
data-options="field:'status',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">
Status</th>
</tr>
</thead>
</table>
<table id="dg1" class="easyui-datagrid" title="Cell Editing in DataGrid" style="width:700px;height:auto">
<thead>
<tr>
<th data-options="field:'itemid',width:80,editor:'text'">Item ID</th>
<th data-options="field:'productid',width:100,editor:'text'">Product</th>
<th
data-options="field:'listprice',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}">
List Price</th>
<th data-options="field:'unitcost',width:80,align:'right',editor:'numberbox'">Unit Cost</th>
<th data-options="field:'attr1',width:250,editor:'text'">Attribute</th>
<th
data-options="field:'status',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">
Status</th>
</tr>
</thead>
</table>
</body>
</html>
相關文章
- 1. layui 框架 table插件 實現鍵盤快捷鍵 切換單元格編輯
- 2. vue+element-ui 實現table單元格點擊編輯，而且按上下左右鍵單元格之間切換
- 3. 擴展jquery easyui datagrid編輯單元格
- 4. easyui-datagrid 編輯單元格
- 5. easyui-datagri編輯單元格
- 6. 編輯單元格
- 7. Extjs grid 單元格編輯
- 8. Excel合併單元格快捷鍵
- 9. 【新特性速遞】單元格導航（上下左右鍵，TAB鍵和ENTER鍵）
- 10. datagrid編輯單元格中的內容
- 更多相關文章...
- • Eclipse 快捷鍵 - Eclipse 教程
- • XML 編輯器 - XML 教程
- • IntelliJ IDEA 代碼格式化配置和快捷鍵
- • TiDB 在摩拜單車在線數據業務的應用和實踐
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
