jqGrid動的設定行選択、選択解除setSelection使用上の注意
29309 ワード
jqGridはsetSelectionメソッドを使用して、行の選択または選択しないことを動的に設定できます.jqGridユーザーズマニュアルには、次のような構文があります.
setSelection(string rowid, [boolean onselectrow]) Toggles a selection of the row with id = rowid; If selected the selrow grid parameter is set to the rowid - in multiselect mode to selarrrow array is added the rowid. The revers if the row is deselected.
パラメータの説明: string rowid - the id of the row boolean onselectrow - if onselectrow is true (default) then the event onSelectRow and/or triggered event jqGridSelectRow are launched, otherwise not. 選択または選択解除時にjqGridSelectRowイベントがトリガーされるかどうか、trueがトリガーされ、falseはトリガーされません.
jqGridユーザーズマニュアルから分かるように、setSelectionは実際にtoggle関数であり、行の選択を設定すると選択を解除し、行が選択されていない場合は行を選択し、jqueryのtoggleClassのように、この使い方は少し穴があいている.通常、私たちが望んでいるのは、選択を設定:行が選択されていない場合は選択され、行が選択されている場合は選択を続行します. 選択を解除:行が選択されていない場合は選択されていない状態を維持し続け、行が選択されている場合は選択を解除します.
このため、行が選択されているかどうかを設定する関数は、次のように表示されます.
具体的には下記のDEMOをご覧ください.
setSelection(string rowid, [boolean onselectrow]) Toggles a selection of the row with id = rowid; If selected the selrow grid parameter is set to the rowid - in multiselect mode to selarrrow array is added the rowid. The revers if the row is deselected.
パラメータの説明:
jqGridユーザーズマニュアルから分かるように、setSelectionは実際にtoggle関数であり、行の選択を設定すると選択を解除し、行が選択されていない場合は行を選択し、jqueryのtoggleClassのように、この使い方は少し穴があいている.通常、私たちが望んでいるのは、
このため、行が選択されているかどうかを設定する関数は、次のように表示されます.
// rowid, rowId
// selected, ，true
// triggerFlag, jqGridSelectRow
function setSelectionNew(rowid, selected, triggerFlag) {
if (selected) { //
if (rowid ) setSelection(rowid, triggerFlag);
} else { //
if (rowid ) setSelection(rowid, triggerFlag);
}
}
具体的には下記のDEMOをご覧ください.
<html>
<head>
<meta charset="UTF-8" />
<title>jggrid title>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.bootcss.com/jqgrid/4.6.0/css/ui.jqgrid.css" />
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js">script>
<script src="https://cdn.bootcss.com/jqgrid/4.6.0/js/jquery.jqGrid.min.js">script>
<style>
tr.ui-state-highlight td, tr.selected-row td{background: #dff0d8;}
style>
head>
<body>
<div class="page-content container">
<div class="page-body">
<div class="panel panel-default" id="panel-orders">
<div class="panel-heading">
<button type="button" class="btn btn-primary" onclick="doSelect()"> 3 button>
<button type="button" class="btn btn-primary" onclick="cancelSelect()"> 3 button>
div>
<table id="orders" class="table-bordered">table>
div>
div>
div>
<script type="text/javascript">
var data = [], rowIds = [];
function getBills() {
var rowCount = 10;
for (var i = 0; i < rowCount; i ++) {
data.push({
sid: i,
bill_id: i,
bill_detail: i,
goods_id: i,
unit_id: i,
package_id: i,
ref_detail: i,
goods_no: i + 1,
goods_name: ' ' + rowCount + i,
car_type_name: ' ' + rowCount + i,
package_name: ' ' + rowCount + i,
unit: i%2==0 ? ' ' : ' ',
snp: 0.89,
box_count: rowCount + i,
total_count: rowCount + i,
goods_count: rowCount + i,
out_count: rowCount + i,
bill_no: 'BN0000000' + i,
})
}
$("#orders").jqGrid("clearGridData").jqGrid('setGridParam',{data: data || []}).trigger('reloadGrid');
}
function doSelect() {
var rowId = "3";
if (! $("#jqg_orders_" + rowId).prop("checked")) {
$("#orders").jqGrid("setSelection", rowId, false);
}
}
function cancelSelect() {
var rowId = "3";
if ($("#jqg_orders_" + rowId).prop("checked")) {
$("#orders").jqGrid("setSelection", rowId, false);
}
}
/** jqgrid start．**/
$(function() {
$("#orders").jqGrid({
colModel: [
{label: " ", name: "goods_no", width: 60},
{label: " ", name: "goods_name", width: 180},
{label: " ", name: "car_type_name", width: 70},
{label: " ", name: "package_name", width: 70},
{label: " ", name: "unit", width: 60 },
{label: " ", name: "snp", width: 50, sorttype: "number"},
{label: " ", name: "total_count", width: 70, sorttype: "number"},
{label: " ", name: "goods_count", width: 70,},
{label: " ", name: "out_count", width: 70, sorttype: "number"},
],
datatype: 'local',
rownumbers: true,
height: 300,
rowNum: 1000,
multiselect: true,
});
getBills();
});
script>
body>
html>