easyUI編集可能テーブルエディタイベントの追加
easyUIの編集可能なテーブルを使用する場合、エディタにキーボードイベント処理を追加することで、キーボードで直接操作することができ、編集効率を大幅に向上させることができます.例えば、1行の編集が完了したら、折り返しを押すと自動的に新しい行を追加することができ、追加行ボタンをクリックすることなく、編集の途中で編集をキャンセルしたい場合は、キーボードの方向キー↑を押して編集をキャンセルすることができます.エディタにイベントを追加するには、2つの方法があります.方法1:apiで対応するエディタjQueryオブジェクトを取得し、そのオブジェクトにイベントを追加する方法2:クラスセレクタで対応するエディタを選択し、イベントを追加します(現在の編集行にclassが1つあるのは他の行にはありません)
なお、apiを介してエディタのjQueryオブジェクトを取得する場合、apiはeditorを介している.targetで取得しましたが、1.5バージョンのeasyUIでは本物のエディタオブジェクトは取得できません.ブラウザの開発者ツールでコードを表示すると、各エディタは大体このような構造になっています.
editor.targetが取得するのは実際には
方式一コード:
方式2:
完全なサンプルコード
なお、apiを介してエディタのjQueryオブジェクトを取得する場合、apiはeditorを介している.targetで取得しましたが、1.5バージョンのeasyUIでは本物のエディタオブジェクトは取得できません.ブラウザの開発者ツールでコードを表示すると、各エディタは大体このような構造になっています.
type="text" class="datagrid-editable-input textbox-f" style="display: none;">
class="textbox textbox-invalid" style="width: 322px; height: 24px;">
"_easyui_textbox_input2" type="text" class="textbox-text validatebox-text validatebox-invalid textbox-prompt" autocomplete="off" tabindex="" placeholder="" style="text-align: start; margin: 0px; padding-top: 0px; padding-bottom: 0px; height: 22px; line-height: 22px; width: 320px;" title="">
type="hidden" class="textbox-value" value="">editor.targetが取得するのは実際には
方式一コード:
var editors = $("#keyEventGrid").datagrid("getEditors",index);
for(var i=0; ivar editor = editors[i];
$(editor.target.siblings("span").children("input"))
.on("keydown",function(e){
var code = e.keyCode || e.which;
if(code == 13){
addRow("keyEventGrid");//
}else if(code == 38){
cancelRow("keyEventGrid");//
}
})
} 方式2:
$(".datagrid-row-editing .textbox-text").on("keydown",function(e){
var code = e.keyCode || e.which;
if(code == 13){
addRow("keyEventGrid");
}else if(code == 38){
cancelRow("keyEventGrid");
}
});完全なサンプルコード
"UTF-8">
"stylesheet" type="text/css" href="../bootstrap/css/bootstrap.css"/>
"stylesheet" type="text/css" href="../easyui1.5/themes/bootstrap/easyui.css"/>
"stylesheet" type="text/css" href="../easyui1.5/themes/icon.css"/>
"../easyui1.5/jquery.min.js"</span> <span class="hljs-class"><span class="hljs-keyword">type</span>=</span><span class="hljs-string">"text/javascript"</span> charset=<span class="hljs-string">"utf-8"</span>>
"../easyui1.5/jquery.easyui.min.js"</span> <span class="hljs-class"><span class="hljs-keyword">type</span>=</span><span class="hljs-string">"text/javascript"</span> charset=<span class="hljs-string">"utf-8"</span>>
"../easyui1.5/jquery.edatagrid.js"</span> <span class="hljs-class"><span class="hljs-keyword">type</span>=</span><span class="hljs-string">"text/javascript"</span> charset=<span class="hljs-string">"utf-8"</span>>
"../easyui1.5/locale/easyui-lang-zh_CN.js"</span> <span class="hljs-class"><span class="hljs-keyword">type</span>=</span><span class="hljs-string">"text/javascript"</span> charset=<span class="hljs-string">"utf-8"</span>></sctipr>
<style <span class="hljs-class"><span class="hljs-keyword">type</span>=</span><span class="hljs-string">"text/css"</span>>
/**
* ， easyUI bootstrap
*/
.datagrid-row.datagrid-row-editing.datagrid-row-selected{
background: #F3F3F3;
color: #<span class="hljs-number">333333</span>;
}
</style>
</head>
<body>
<div <span class="hljs-keyword">class</span>=<span class="hljs-string">"container-fluid"</span>>
<div <span class="hljs-keyword">class</span>=<span class="hljs-string">"row"</span>>
<div <span class="hljs-keyword">class</span>=<span class="hljs-string">"col-sm-12"</span>>
<table id=<span class="hljs-string">"keyEventGrid"</span> style=<span class="hljs-string">"width: 100%;height: 400px;"</span>></table>
<div id=<span class="hljs-string">"gridToolbar"</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">"container-fluid"</span>>
<div <span class="hljs-keyword">class</span>=<span class="hljs-string">"row"</span>>
<div <span class="hljs-keyword">class</span>=<span class="hljs-string">"col-sm-12"</span>>
<a <span class="hljs-keyword">class</span>=<span class="hljs-string">"btn btn-sm btn-primary pull-right"</span> onclick=<span class="hljs-string">"addRow('keyEventGrid')"</span>> </a>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(<span class="hljs-keyword">function</span>(){
$(<span class="hljs-string">"#keyEventGrid"</span>).edatagrid({
toolbar:<span class="hljs-string">"#gridToolbar"</span>,
singleSelect:<span class="hljs-keyword">true</span>,
fitColumns:<span class="hljs-keyword">true</span>,
columns:[[
{field:<span class="hljs-string">"userName"</span>,title:<span class="hljs-string">" "</span>,width:<span class="hljs-number">80</span>,eidtor:{<span class="hljs-class"><span class="hljs-keyword">type</span>:"<span class="hljs-title">textbox</span>",<span class="hljs-title">options</span>:{<span class="hljs-title">required</span>:<span class="hljs-title">true</span>}}},</span>
{field:<span class="hljs-string">"age"</span>,title:<span class="hljs-string">" "</span>,width:<span class="hljs-number">40</span>,editor:<span class="hljs-string">"numberbox"</span>,align:<span class="hljs-string">"right"</span>},
{field:<span class="hljs-string">"cell"</span>,title:<span class="hljs-string">" "</span>,width:<span class="hljs-number">60</span>,editor:{<span class="hljs-class"><span class="hljs-keyword">type</span>:"<span class="hljs-title">textbox</span>",<span class="hljs-title">options</span>:{<span class="hljs-title">required</span>:<span class="hljs-title">true</span>}}},</span>
{field:<span class="hljs-string">"qq"</span>,title:<span class="hljs-string">"QQ"</span>,width:<span class="hljs-number">60</span>,editor:<span class="hljs-string">"textbox"</span>}
]],
onAdd:<span class="hljs-keyword">function</span>(index,row){
<span class="hljs-comment">// </span>
$(<span class="hljs-string">".datagrid-row-editing .textbox-text"</span>)[<span class="hljs-number">0</span>].focus();
<span class="hljs-comment">// </span>
},
onSave:<span class="hljs-keyword">function</span>(index,row){
<span class="hljs-comment">// ，onSave </span>
<span class="hljs-comment">// ， ， </span>
<span class="hljs-comment">// edatagrid saveUrl , ， ， row </span>
<span class="hljs-comment">// ， ， ， ， ， </span>
}
});
});
<span class="hljs-keyword">function</span> addRow(grid){
$(<span class="hljs-string">"#"</span>+grid).edatagrid(<span class="hljs-string">"addRow"</span>);
}
<span class="hljs-keyword">function</span> cancelRow(grid){
$(<span class="hljs-string">"#"</span>+grid).edatagrid(<span class="hljs-string">"cancelRow"</span>);
}