jQuery EasyUI ライブラリのように、jqGrid で列グループを実装できますか?
jQuery EasyUI のデモWeb サイトにアクセスして、左側のメニューから [Datagrid]、[Column Group] の順に選択すると、私の言いたいことが理解できます。
助けてくれてありがとう
15316 次
3 に答える
10
あなたの質問は新しいものではありません。対応する機能のリクエストが、trirand フォーラムまたはスタックオーバーフローで何度も尋ねられました。少し前に、近い質問について別の回答をします。
あなたの質問を読んだ後、すべての jqGrid 機能をサポートする完璧なソリューションを作成しないことに決めました(これは一度に難しすぎます)。その代わりに、多くの場合にすでに使用できるが、いくつかの制限があるソリューションを作成することにしました。
デモは私の最初の結果を示しています:
制限:
- グリッドの列はサイズ変更できません。すべてのグリッド列に設定するためにデモ
cmTemplate: {resizable: false}パラメータを使用します。resizable: false sortable: trueはサポートされていませんshowCol、hideColまたはcolumnChooserは現在サポートされていませんが、問題をすばやく修正できると確信しています。- 追加の列ヘッダーを配置する列は同じ幅にする必要があります。列の幅の値が異なる場合、列の合計幅は列間で自動的に分割されます。
shrinkToFit: false反対側では、すべてのテストで、 のような他の一般的なオプションを使用したり、メソッドautowidth: trueに関してグリッド幅を変更setGridWidthしたり（縮小の有無にかかわらず）、すべて問題なく機能します。
まずは機能の使い方について。insertColumnGroupHeader上記の例で使用する関数を次のように記述しました
insertColumnGroupHeader(grid, 'amount', 3, '<em>Information about the Price</em>');
「金額」列から始まる 3 列にわたって、HTML フラグメント「価格に関する情報」を含む追加の列ヘッダーを挿入します。したがって、使い方は非常に簡単です。もちろん、「価格に関する情報」などの任意のテキストを追加の列ヘッダーとして使用できます。
関数insertColumnGroupHeaderには次のコードがあります。
var denySelectionOnDoubleClick = function ($el) {
// see https://stackoverflow.com/questions/2132172/disable-text-highlighting-on-double-click-in-jquery/2132230#2132230
if ($.browser.mozilla) {//Firefox
$el.css('MozUserSelect', 'none');
} else if ($.browser.msie) {//IE
$el.bind('selectstart', function () {
return false;
});
} else {//Opera, etc.
$el.mousedown(function () {
return false;
});
}
},
insertColumnGroupHeader = function (mygrid, startColumnName, numberOfColumns, titleText) {
var i, cmi, skip = 0, $tr, colHeader, iCol, $th,
colModel = mygrid[0].p.colModel,
ths = mygrid[0].grid.headers,
gview = mygrid.closest("div.ui-jqgrid-view"),
thead = gview.find("table.ui-jqgrid-htable>thead");
mygrid.prepend(thead);
$tr = $("<tr>");
for (i = 0; i < colModel.length; i++) {
$th = $(ths[i].el);
cmi = colModel[i];
if (cmi.name !== startColumnName) {
if (skip === 0) {
$th.attr("rowspan", "2");
} else {
denySelectionOnDoubleClick($th);
$th.css({"padding-top": "2px", height: "19px"});
$tr.append(ths[i].el);
skip--;
}
} else {
colHeader = $('<th class="ui-state-default ui-th-ltr" colspan="' + numberOfColumns +
'" style="height:19px;padding-top:1px;text-align:center" role="columnheader">' + titleText + '</th>');
denySelectionOnDoubleClick($th);
$th.before(colHeader);
$tr.append(ths[i].el);
skip = numberOfColumns - 1;
}
}
mygrid.children("thead").append($tr[0]);
};
さらに、jqGrid コードにいくつかの変更を加える必要がありました。の修正版（4.1.2版の修正版）はこちらjquery.jqGrid.src.jsからダウンロードできます。変更は 2 つのブロックから構成されます。まず、関数のコード、1874～1884行を変更しましたsortData
var thd= $("thead:first",ts.grid.hDiv).get(0);
$("tr th:eq("+ts.p.lastsort+") span.ui-grid-ico-sort",thd).addClass('ui-state-disabled');
$("tr th:eq("+ts.p.lastsort+")",thd).attr("aria-selected","false");
$("tr th:eq("+idxcol+") span.ui-icon-"+ts.p.sortorder,thd).removeClass('ui-state-disabled');
$("tr th:eq("+idxcol+")",thd).attr("aria-selected","true");
if(!ts.p.viewsortcols[0]) {
if(ts.p.lastsort != idxcol) {
$("tr th:eq("+ts.p.lastsort+") span.s-ico",thd).hide();
$("tr th:eq("+idxcol+") span.s-ico",thd).show();
}
}
以下に：
var previousSelectedTh = ts.grid.headers[ts.p.lastsort].el,
newSelectedTh = ts.grid.headers[idxcol].el;
$("span.ui-grid-ico-sort",previousSelectedTh).addClass('ui-state-disabled');
$(previousSelectedTh).attr("aria-selected","false");
$("span.ui-icon-"+ts.p.sortorder,newSelectedTh).removeClass('ui-state-disabled');
$(newSelectedTh).attr("aria-selected","true");
if(!ts.p.viewsortcols[0]) {
if(ts.p.lastsort != idxcol) {
$("span.s-ico",previousSelectedTh).hide();
$("span.s-ico",newSelectedTh).show();
}
}
次にgetColumnHeaderIndex、関数を次のように定義しました
var getColumnHeaderIndex = function (th) {
var i, headers = ts.grid.headers, ci = $.jgrid.getCellIndex(th);
for (i = 0; i < headers.length; i++) {
if (th === headers[i].el) {
ci = i;
break;
}
}
return ci;
};
の2172行目と2185行目grid.base.jsを変更しました
var ci = $.jgrid.getCellIndex(this);
に
var ci = getColumnHeaderIndex(this);
それはすべてです。上記の変更は元の jqGrid コードに悪影響を与えず、通常どおり使用できます。次回はtrirandフォーラムで提案を公開します。
更新:デモの別のバージョンでは、ヘッダーを持つ列を除くすべての列のサイズを変更できます。バージョンでは、追加の列ヘッダーを配置するすべての列が同じ幅である必要があります。列間で自動的に分割されない列の幅。同じ列幅を手動で設定する必要があります。
UDPATED 2 : マルチヘッダー jqGrid のより高度なバージョンの作成における進捗状況についてお知らせしたいと思います。最初のワイルドレイド は非常に興味深いソリューションを投稿しました。ここで彼のデモを参照してください。ちなみに、私が提案した修正 (上記を参照) を使用してメソッド jqGrid を使用すると、デモのアイコンの並べ替えに関する問題が解決されます。コンフォメーションとしてここのデモを参照してください。
rowSpanその後、列の高さを増やすために使用する複数列のアプローチの制限を減らすことにもう少し取り組みます。これが私の現在の中間結果です: new demo . 新しいデモは、Internet Explorer 9/8、Firefox、および Opera ですでに非常にうまく機能しています。Webkit ベースのブラウザー (Google Chrome および Safari) では、上記の制限がまだあります (マルチヘッダーを含む列ヘッダーは同じサイズでなければならず、サイズ変更できません)。デモは見栄えがよく、制限があり、Webkit ベースの Web ブラウザーで見栄えがします。それにもかかわらず、ソート時間の進行状況を確認できます。
answerのデモに基づいて、列のサイズを変更するために使用されるサイズ変更可能な領域の高さを増やす予定です。もちろん、列ヘッダーよりも多くのヘッダーの使用もサポートされます。ColumnChooser または showCol/hideCol もサポートされます。私にとって最も興味深いのは、Webkit ベースのブラウザー (Google Chrome と Safari) を使用して複数行の列ヘッダーを実装する方法を明確に見つけることです。おそらく他の誰かが解決策を見つけるでしょうか？それが、ここで未完了の結果を共有することにした主な理由です。rowSpan
UPDATE 3 : jqGrid のコードの変更は、jqGrid のメイン コードに含まれています (こちらを参照)。ここで説明したソリューションをthisおよびthis demosに改善しました。2 番目のデモでは、列幅を増やす場合はグリッド幅を増やします。私は個人的にその振る舞いが好きです。
更新 4 : デモの次のバージョンはこちらでご覧いただけます。useColSpanStyle使用するかどうかを定義するブール値オプション (パラメーター) がありますcolspan。falseパラメータの値を使用すると、結果は次のようになります。
于 2011-09-08T16:47:45.307 に答える
0
視覚的な外観のみについては、グリッド データをロードした後にメソッドを呼び出して jqgrid の html 出力を編集することでこれを実現できる場合があります。「jqgh_」プレフィックスの後に jgrid の colName 値を指定すると、列ヘッダーにアクセスできます。要素のセットを取得したら、それらを変更できます。
明らかに最善の方法ではありませんが、うまくいく可能性があります。
于 2011-09-08T11:02:51.200 に答える
0
jqGridの新しいバージョンとして、オレグのソリューションが公式になりました:)
v4.4.4 でテストしていますが、すべての 4.x で動作するはずです。
また、ドキュメントがそうでないと言っている場合でも、並べ替えをサポートしています (実際には API ref を更新する必要があります)。
オレグが公式になったのはこれが初めてではありません。
于 2013-06-17T14:43:49.357 に答える