jqgrid簡単な勉強メモ_jquery

JqGrid ドキュメント: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs

JqGrid デモ: http://trirand.com/blog/jqgrid/jqgrid.html#t107

ここでは JqGrid の基本については説明しません。分からない場合は、ブログ ガーデンまたは Google のドキュメントを参照してください。まずレンダリングを見てみましょう。

このデモは、クエリ、変更、グループ化が可能です。追加や削除などのいくつかの基本的な機能は、JqGrid デモで見つけることができます。

論理的アイデア: 今年の事業計画データを初めてロードします。ロードが完了したら、JqGrid をローカル データに設定します。これにより、ページングとデータ クエリがカスタムになります。今月以降のプランのみを変更でき、afterShowForm と afterclickPgButtons で検証が行われます。時間が今月以下の場合、送信ボタンが無効に設定されます。それ以外の場合は、送信ボタンが機能します。サーバーに送信する前に、JqGrid のデータ型を json に設定する必要があります。そうしないと、サーバーは要求されません。

このデモでは、2010、2011、2012 の 3 つの静的データ ソースのみを使用します。データを変更する場合、情報のみが返され、データ ソース データは変更されません。

Apsx ページ コード:

🎜>JavaScript での JqGrid の設定コード:

コードをコピー コードは次のとおりです:

jQuery("#jqgridlist").jqGrid({ url: 'DataHandler.ashx',
データ型: function (pdata) {
$.ajax({ url: 'DataHandler.ashx' 、
dataType: "json"、type: "post"、
contentType: "application/x-www-form-urlencoded; charset=utf-8"、
data: pdata、
error : function (data, status, statusText) {
if (!(status == 200 && statusText == "parsererror"))
alert("クライアント側のデータ解析中にエラーが発生しました! 管理者に連絡してください" ) ;
else
alert "リクエストサーバーエラー! 後で再試行するか、管理者に連絡してください");
},
complete: function (jsondata, stat) {
if ( stat = = "成功") {
var thegrid = jQuery("#jqgridlist")[0],
data = eval("(" jsondata.responseText ")");
thegrid.addJSONData( data) ;
data = null;
jsondata = null;
},
colNames: ["行番号", "日付期間", "c_code", "ユニット名", "売上高", "営業利益", "鉱工業生産額合計", "利益総額", "支払った税金"],
colModel: [{ name: " ROWNUM",インデックス: "ROWNUM"、編集可能: false、summaryType: 'count'、
summaryTpl: '({0}) total'
}、
{ 名前: "JHQJ"、インデックス: " JHQJ"、 editable: true、stype: 'text'、search: true、searchoptions: { sopt: ['eq'] }、
editoptions: { style: "border:0; background-color:transparent;" }
},
{ 名前: "C_CODE"、インデックス: "C_CODE"、並べ替え可能: false、編集可能: true、検索: false、非表示: true、
editrules: { edithidden: false }、editoptions: { style: "border:0; 背景色:透明;" }
},
{ 名前: "DWJC"、インデックス: "DWJC"、編集可能: true、検索: true、stype: 'text' 、searchoptions: { sopt: ['cn'] }、
editoptions: { style: "border:0; background-color:transparent;" }
}、
{ name: "a21"、index : "a21 "、編集可能: true、検索: true、editrules: {number: true }、
フォーマッタ: 'currency'、summaryType: 'sum'
}、
{ name: "a22"、index: " a22"、編集可能: true、検索: true、editrules: {number: true }、
フォーマッタ: 'currency'、summaryType: 'sum'
}、
{ name: "a23" 、インデックス: "a23"、編集可能: true、検索: true、editrules: {number: true }、
フォーマッタ: 'currency'、summaryType: 'sum'
}、
{ name: "a24 "、インデックス: "a24"、編集可能: true、検索: true、editrules: {number: true }、
フォーマッタ: 'currency'、summaryType: 'sum'
}、
{ name: " a25"、インデックス: "a25"、編集可能: true、検索: true、editrules: {number: true }、
フォーマッタ: 'currency'、summaryType: 'sum'
}
]、
高さ: 400、
autowidth: true、
width: 700、
rowNum: 70、
rowTotal: 1300、
rowList: [13, 70, 100]、
rownumbers : false、
loadonce: true、
loadtext: '読み込み中...'、
forceFit: true、
gridview: true、
pager: '#pager'、
sortname: 'ROWNUM '、
scroll: 0、
page: 1、
viewrecords: true、
editurl: 'DataHandler.ashx'、
sortorder: "asc"、
jsonReader: {
root: "rows"、
page: "page"、
total: "total"、
records: "records"、
repeatitems: false
} 、
grouping : false、
groupingView: {
groupField: ['DWJC']、
groupColumnShow: [true]、
groupText: ['{0}< /b>] 、
groupCollapse: false、
groupOrder: ['asc']、
groupsummary: [false]、
groupDataSorted: true
}、
gridComplete: function () {
$("#jqgridlist").setGridParam({ datatype: 'local' });
},
caption: "

;

グループ: グループをクリアユニット名日付期間< /option>

"
});


いくつかの属性について説明します:
datatype: json に設定されている場合、要求されたデータは json 形式です。さらに、追加、削除、確認、および変更の各操作はサーバーを要求します。
ローカルに設定すると、すべての操作はカスタマー サービス側で完了し、サーバーには送信されません。
関数に設定すると (この例を参照)、データが取得されるたびに、この関数によって処理されます。
JS コードをデバッグすることで確認できます。
rownumbers: false に設定すると行番号は表示されません。それ以外の場合はその逆です。
loadonce: true に設定すると、デフォルトは false になります。 rowTotal: 一度にインポートされるデータの最大行数。
jsonReader: 設定はサーバーから返されたデータに対応します。詳細については、ドキュメントを参照してください: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data
gridComplete: Load all data 完了し、他のすべての処理イベントが完了したときに起動されます。英語のドキュメントの説明: これは、すべてのデータがグリッドにロードされ、他のすべてのプロセスが完了した後に発生します。また、データのロード時に何かをトリガーする必要がある場合のみ、データ型パラメータとは関係なく、ページングのソート後にイベントが発生します。関数では、loadComplete イベントを使用できます。
loadComplete: このイベントは、すべてのサーバー要求の直後に実行されます。 data データ型に応じた応答からのデータ グリッド パラメーター
caption: 文字列型。テーブルのタイトル。ただし、ここに HTML コードを記述することができます。これはちょっとしたトリックです。
グループ化: グループ化しない場合、デフォルトは false であり、その逆も同様です。
groupingView: グループ化について: 詳細な紹介がある JqGrid デモを参照してください。
editurl：编辑データ発信URL
////////////////////////////////////// //////////////////////////////////////////////// //////////////////////////////////////////////// ////
jQuery("#jqgridlist").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false }, {}, {}, {}, { multipleSearch: true、closeAfterSearch: true、closeOnEscape: true })
.navButtonAdd("#pager", {
caption: "",
buttonicon: "ui-icon-pencil",
onClickButton : function () {
var gr = jQuery("#jqgridlist").jqGrid("getGridParam", "selrow");
if (gr != null)
jQuery("#jqgridlist") .jqGrid("editGridRow", gr, {
afterclickPgButtons: function (whatbutton, formid, rowid) {
var ret = jQuery("#jqgridlist").jqGrid('getRowData', rowid),
objyear = ret.JHQJ;
if (!ValidateDate(objyear)) jQuery("#sData").attr('無効', '無効');
else
jQuery("#sData") .removeAttr('disabled');
},
afterShowForm: function (formid) {
var jqgrid = jQuery("#jqgridlist");
var rowid = jqgrid.jqGrid("getGridParam") , "selrow"),
ret = jqgrid.jqGrid('getRowData', rowid);
if (!ValidateDate(ret.JHQJ)) jQuery("#sData").attr('無効', '無効');
else
jQuery("#sData").removeAttr('disabled');
},
beforeSubmit: function (postdata, formid) {
var reg = "^(([1-9]\d*)|0)(\.\d{1,2}) ?$";
if (!Regex(reg, postdata.a21))
return [false, "销售回款格式错误"];
if (!Regex(reg, postdata.a22))
return [false, "营业收入格式错误"];
if (!Regex(reg, postdata.a23))
return [false, "工业总产值 格式错误"];
if (!Regex(reg, postdata.a24))
return [false, "利润总额格式错误"];
if (!Regex(reg, postdata.a25))
return [false, "上交税金格式错误"];
else
return [true, ""];
},
afterSubmit: function (response, postdata) {
var json = response.responseText; //形式は {status:"success/error",msg:""}
var result = eval("(" json ")"), successs = false;
if ("success" == result.status) {
success = true;
$("#FormError td").html(result.msg);
$("#FormError").show();
}
return [success, result.msg, ""];
}
});
else
alert("请选择行");
},
position: "first",
title: "修正",
cursor: "pointer"
}).filterToolbar({ stringResult: true, autosearch: true, searchOnEnter: false、groupOp: "AND" });
function Regex(reg, val) {
var patt = new RegExp(reg, "g");
return patt.test(val);
}
function ValidateDate(objyear) {
var year = null,
month = null,
currentyear = null,
date = new Date();
if (objyear.length == 4) {
year = parseInt(objyear.substr(0, 4));
current Year = parseInt(date.getFull Year());
} else {
年 = parseInt(obj Year.substr(0, 6))
月 = (date.getMonth() 1).toString();
月 = month.length == 1 ? "0" 月 : 月;
current Year = parseInt(date.getFull Year() month);
}
if (年 return false; //不?可ã ¤辑-
else
return true; //可¨ã ã°?编Àã¤辑-
}
});
///////////////////////////////////////////// //////////////////////////////////////////////// ///
アニメーション态改变分组
jQuery("#chngroup").live("change", function () {
var vl = $(this).val(); if (vl) {
if (vl == "clear") {
jQuery("#jqgridlist").jqGrid('groupingRemove', true);
} else {
jQuery("#jqgridlist"). jqGrid('groupingGroupBy', vl);
}
}
});
///////////////////////////////////////////// //////////////////////////////////////////////// /////////
Slider 制御代码
function Create YearList() {
var currentyear = parseInt(new Date().getFull Year());
var mulit Year = current Year - 1990;
var objul = $(".slider_context ul");
if (mulit Year >= 0) {
for (varindex = -1, len = mulit Year; Index <= len; Index ) {
if (current Year -index == current Year)
objul.append("

" currentyear.toString() "

");
else
objul.append("

" (currentyear -index).toString() "

");
}
} else {
objul.append("

" currentyear.toString() "

");
}
}
$(function () {
Create YearList();
$(".slider").silder({
速度: "通常",
slideBy: 2
});
$(".slider_context li").live("click", function () {
$.each($(".slider_context li"), function (id, item) {
$( this).removeClass('selected');
$(this).addClass('selected');
var yearVal = $(this).html(); jqgrid = $("#jqgridlist");
jqgrid.setGridParam({ datatype: 'json' });
jqgrid.jqGrid('appendPostData', { year: yearVal, f: "year" });
jqgrid.trigger("reloadGrid");
jqgrid.jqGrid('removePostDataItem', "f">););
/////////////////////////////////// /// ////////////////////////////////////////////// ////// ////////////////////////////////////
var jqgrid = $ ("#jqgridlist");
//つまり、この変更の前にデータ型を json に変更します。そうしないと、サーバーに送信できません。
jqgrid.setGridParam({ datatype: 'json' }); 🎜>jqgrid.jqGrid('appendPostData', { year: yearVal, f: "year" });//PostData を追加
jqgrid.trigger("reloadGrid");//JqGrid をリロード
jqgrid.jqGrid( 'removePostDataItem', "f");/ /PostData の削除
///////////////////////////////// ////////////// /////////////////////////////////// ///////////////// ///////////////////////
gridComplete: function () {
$("#jqgridlist").setGridParam({ datatype: 'local ' });
},
ロードが完了するたびに jqgrid をローカル データに設定します。
デモのダウンロード アドレス
/201105/yuanma/JqGridDemo.rar