資料表格 - DataGrid

內容

• 概況 
• 使用方法 
• 資料列屬性 
• 編輯 
• 資料檢視 
• 事件 
• 方法 

繼承$.fn.panel.defaults，使用$.fn.datagrid.defaults過載預設值。.

資料表格顯示的資料以表格的形式，並提供了豐富的選擇，排序，分組和編輯資料的支援。這個資料表格被設計以縮短開發時間，並要求開發商沒有具體的知識。它是輕量級的，功能豐富的。單元格合併，多列標題，凍結列和頁尾是其功能只是一小部分。

依賴元件（Dependencies）

使用方法（Usage Example）

從現有的表單元素建立資料表格，定義在html中的行，列和資料。

1. <tableclass="easyui-datagrid">
2. <thead>
3. <tr>
4. <thdata-options="field:'code'">Code</th>
5. <thdata-options="field:'name'">Name</th>
6. <thdata-options="field:'price'">Price</th>
7. </tr>
8. </thead>
9. <tbody>
10. <tr>
11. <td>001</
    td><td>name1</td><td>2323</td>
12. </tr>
13. <tr>
14. <td>002</td><td>name2</td><td>4612</td>
15. </tr>
16. </tbody>
17. </table>

通過<TABLE>標記建立的DataGrid。巢狀的<TH>標籤定義的列的表。

1. <tableclass="easyui-datagrid"style="width:400px;height:250px"
2. data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">
3. <thead>
4. <tr>
5. <thdata-options="field:'code',width:100">Code</th>
6. <thdata-options="field:'name',width:100">Name</th>
7. <thdata-options="field:'price',width:100,align:'right'">Price</th>
8. </tr>
9. </thead>
10. </table>

使用JavaScript建立資料表格。

1. <tableid="dg"></table>

1. $('#dg').datagrid({   
2.     url:'datagrid_data.json',   
3.     columns:[[   
4.         {field:'code',title:'Code',width:100},   
5.         {field:'name',title:'Name',width:100},   
6.         {field:'price',title:'Price',width:100,align:'right'}   
7.     ]]   
8. });  

查詢資料填充資料表格。

1. $('#dg').datagrid('load', {   
2.     name: 'easyui',   
3.     address: 'ho'
4. });  

資料更改與伺服器互動，重新整理當前資料。

1. $('#dg').datagrid('reload');    // reload the current page data

資料表格屬性（DataGrid Properties）

屬性繼承控制面板，以下是資料表格獨有的

資料表格屬性（DataGrid Properties）

屬性繼承控制面板，以下是資料表格獨有的屬性。

$('#dg').datagrid({
	toolbar: '#tb'
});
<div id="tb">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a>
</div>

$('#dg').datagrid({
	toolbar: [{
		iconCls: 'icon-edit',
		handler: function(){alert('edit')}
	},'-',{
		iconCls: 'icon-help',
		handler: function(){alert('help')}
	}]
});

$('#dg').datagrid({
	queryParams: {
		name: 'easyui',
		subject: 'datagrid'
	}
});

$('#dg').datagrid({
	rowStyler: function(index,row){
		if (row.listprice>80){
			return 'background-color:#6293BB;color:#fff;';
		}
	}
});

// removing 'd' object from asp.net web service json output
$('#dg').datagrid({
	loadFilter: function(data){
		if (data.d){
			return data.d;
		} else {
			return data;
		}
	}
});

列屬性（Column Properties）

資料表格的列是一個物件陣列，即這個物件中的元素也是一個數組（js中陣列是物件）。 物件陣列中的每一個元素都是可配置的物件，每個可配置物件定義一個列。

示例:

1. columns:[[   
2.     {field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true},   
3.     {field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true},   
4.     {title:'Item Details',colspan:4}   
5. ],[   
6.     {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},   
7.     {field:'unitcost',title:'Unit Cost',width:80,align:

   相關推薦

   jquery datagrid 引數及使用

   資料表格 - DataGrid 內容 概況 使用方法 資料列屬性 編輯 資料檢視 事件 方法  繼承$.fn.panel.defaults，使用$.fn.datagrid.defaults過載預設值。. 資料表格顯示的資料以表格的形式，並提供了

   jQuery ajax模板及各引數介紹

   Ajax簡介： Ajax 即“Asynchronous Javascript And XML”（非同步 JavaScript 和 XML），是指一種建立互動式網頁應用的網頁開發技術。 Ajax = 非同步 javaScript 和 XML（標準通用標記語言的

   Jquery Validate 相關引數及常用的自定義驗證規則

   IT程式設計師開發必備-各類資源下載清單 Jquery Validate 相關引數 //定義中文訊息 var cnmsg = { required: “必選欄位”, remote: “請修正該欄位”, email: “請輸入正確格式的電子郵件”, url:

   jQuery相應事件的引數及回撥函式

       <script> $(function(){ var eventType, textValue, textStatus; $('input[type="submit"]').o

   [開發筆記]-使用jquery獲取url及url引數的方法

   使用jquery獲取url以及使用jquery獲取url引數是我們經常要用到的操作 1、jquery獲取url很簡單，程式碼如下： window.location.href; 其實只是用到了javascript的基礎的window物件，並沒有用jquery的知識。

   使用jquery獲取url及url引數

   使用jquery獲取url以及使用jquery獲取url引數是我們經常要用到的操作1、jquery獲取url很簡單，程式碼如下：?1window.location.href;其實只是用到了javascript的基礎的window物件，並沒有用jquery的知識。2、jquer

   jquery的下載及安裝

   version mon scrip 點擊 lib jquer clas javascrip img 1、jquery下載　 　　有兩個版本的 jQuery 可供下載： Production version - 用於實際的網站中，已被精簡和壓縮。 Developmen

   jQuery從0開始之【二】jQuery使用原則及常用事件

   命名 學習者 proto js文件 事件 自己 -o 註意 如果 jQuery名稱沖突問題：jQuery使用$符號作為jQuery的簡介方式。但是某些JavaScript庫中的函數（比如Prototype）同樣使用$符號。jQuery使用名為noConflict()的方法

   jquery的ajax及註意事項

   art post name 填充 for this -- lena 班主任 1.引jquery包<script type="text/javascript"> $(function () { //根據學院動態填充專業 $("[n

   jQuery入口函式及選擇器 - 01

   1.什麼是jQuery？ 1.1 jQuery介紹 jQuery是一個輕型、快速的、小巧的功能豐富的JavaScript類庫。本質就是一堆js的函式的組合。對原生DOM操作做了一些非常有用的封裝，可以讓開發人員更簡單、更方便、更統一的對DOM進行操作，比如：封裝了事件相關統一操作api、DO

   JavaScript及jquery建立節點及節點屬性

   通過JavaScript原生介面建立元素節點及節點屬性，做以下示例演示： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans

   淺談jQuery獲取屬性及屬性的簡單設定

   jQuery的屬性及簡單的使用 一、屬性選擇器 1、title 獲取屬性 //在使用$( )函式時,如果是獲取標籤,必須使用" "(雙引號)引起來,如果是DOM或者變數都不需要使用" " //title是屬性標籤 $("[title]");//獲取屬性是title屬性的標籤; $

   Linux防火牆管理工具iptables常用引數及用法示例

   Linux防火牆iptables策略與規則連 防火牆是由上而下的順序來讀取配置的策略規則，策略規則的設定有兩種：通（放行）、堵（阻止）。當預設策略設定為通時，就要設定拒絕規則，當預設策略為堵時，則要設定允許規則。 iptables服務把用於處理或過濾流量的策略條目稱為規則，多條規則組成一個規則鏈，規則連依

   jquery帶引數繫結事件 bind(type,[data],fn)

   bind 方法為每個選擇的元素事件繫結函式 語法格式：bind(type,[data],fn) 其中引數type為一個或多個型別字串引數，type引數選擇範圍如下： blur,focus,load,scroll,unload,click, dbclick,mousedown,mouseup,mous

   Spark Streaming調優引數及最佳實踐深入剖析-Spark商業調優實戰

   本套技術專欄是作者（秦凱新）平時工作的總結和昇華，通過從真實商業環境抽取案例進行總結和分享，並給出商業應用的調優建議和叢集環境容量規劃等內容，請持續關注本套部落格。版權宣告：禁止轉載，歡迎學習。QQ郵箱地址：[email protected]，如有任何商業交流，可隨時聯絡。

   20 字元裝置驅動相關的函式和引數及實現（虛擬檔案）

   字元裝置驅動相關的函式和引數及實現（虛擬檔案） 使用者程序呼叫函式順序： open ---> kernel ---> cdev.ops->open(..) read ---> kernel ---> cdev.ops->read(

   Python函式中多型別傳值和冗餘引數及函式的遞迴呼叫

   1.多型別傳值和冗餘引數 多型別傳值： def fun(x,y): return x +y print fun(3,5) 8 print fun(*t) 3 def fun(x,y,z): return x + y + z t1 = (1,2,3)

   Linux命令--ss命令的引數及使用詳解

   　　ss是Socket Statistics的縮寫。顧名思義，ss命令可以用來獲取socket統計資訊，它可以顯示和netstat類似的內容。但ss的優勢在於它能夠顯示更多更詳細的有關TCP和連線狀態的資訊，而且比netstat更快速更高效。 一、ss命令的引數如下 Usage: ss [ OPTI

   curl引數及命令

   curl_close — 關閉一個cURL會話 curl_copy_handle — 複製一個cURL控制代碼和它的所有選項 curl_errno

   函式指標作為某個函式的引數及定義函式指標（回撥函式）

   轉載於：http://blog.csdn.net/vlily/article/details/7244682 轉載於：http://blog.csdn.net/shengnan_wu/article/details/8116935 轉載於：http://blog.csdn