jsGrid使用入門

原創藍天上的一朵雲

該資源位址提供了詳細的demo、文件等資料資訊

jsgrid是在jquery基礎上實現的**外掛程式，簡單易用，該外掛程式依賴jquery以及jquery-ui的樣式檔案；

jsgrid的引入使用，如下示意：

引入css：

'
text/css
' rel='
stylesheet
' href='
jsgrid.min.css
' /> 
'text/css
' rel='
stylesheet
' href='
jsgrid-theme.min.css
' />

引入js：

jsgrid通過配置屬性的設定，完成基本使用資訊設定，示例**如下

$("#jsgrid").jsgrid(,
},,,
,,);//
return $("p").html("kkkkk");
return $("").attr("type", "button").text("add")
.on("click", function () );
});}}]
});

jsgrid的data配置專案，支援靜態資料源的指定，通過controller屬性的設定，支援動態從伺服器端請求載入資料。controller是支援通過**方式載入資料的物件，包含了四類方法：

在上面的示例中，loaddata表示從伺服器端請求資料的方法，在上述示例中將暫定將該方法定義為空；insertitem表示從插入資料的方法，當完成資料編輯是可通過該方法向服務端提交資料；updateitem、deleteitem分別表示更改資料和刪除資料的方法，上述方法均支援jquery的延遲物件方法，通過非同步的方式實現資料的增、刪、改、查，當服務端完成資料操作並返回操作應答後獲取響應結果。示例**如下：

在dialoge物件中定義loaddata方法：

var loaddata = function
(e) 
).done(
function
(e) ; 
//**********==服務端完成時發出完成通知***************===
d.resolve(pagingdata); 
}).fail(
function
(e) ); //
**********===向loaddata返回延遲載入方法***************====
return
d.promise(); 
};

設定jsgrid 中controller的 loaddata方法為對應物件的方法：

controller: ,

設定jsgrid中loaddata的響應函式：

//
**********====loaddata延遲載入觸發響應通知***************===
$("#jsgrid").jsgrid("loaddata").done(function
(e) );
});

jsgrid的行渲染：為乙個函式，該函式返回包含tr標籤的行資訊，示例如下：

rowrenderer: function
(item, itemindex) ;
$row =undefined; 
$col =undefined; 
var colors = ""; 
//***************區分奇、偶行資訊設定不同的背景行顏色***************===
switch (itemindex % 2) 
var j= 0; 
for (i in
item) 
$col = $("").addclass('jsgrid-cell jsgrid-control-field jsgrid-align-center').css("width", "50px").css("background-color", colors); 
return
$row; 
//$("table tr:nth-child(even)").css("background-color", "#ffe4c4"); 
//$("table tr:nth-child(odd)").css("background-color", "#f0f0f0"); 
},

在jsgrid中，表頭渲染也採用類似的方式，具體見幫助文件*****=

jsGrid使用入門

Struts使用入門使用

Mysql入門使用

Linux cmake入門使用

jsGrid使用入門

Struts使用入門使用

Mysql入門使用

Linux cmake入門使用

相關推薦