Yahoo!用戶界面博客（YUIBlog）

過濾銳3 DataTable中顯示的數據

除了 ​​排序，這是由支持YUI的3 DataTable的 ，它往往是有益的，能夠對數據進行篩選，並顯示可用的行的一個子集。 在查詢生成器部件銳3畫廊提供了一個用戶界面構建一個簡單的過濾器表達式。

（ 點擊玩這個例子的截圖 。）

歷史

雅虎出版商網絡（YPN）和我一起工作的同事寫的第一個版本。 （他離開後不久，試圖誠實的就業由Jamie Zawinski的先例之後，他開了一家酒吧推銷啤酒 - ！自家釀製的，毫不遜色，但我離題了......）黑客一起查詢生成器“的第一個版本後，他顯示它給我的錯誤。 幾天後，他抱怨說，“你改寫了整個事情！”事實上，我已經重寫，多年來數次。 YPN是走了，但銳的最新版本中所有的數據表的查詢生成器“的權力APT ，雅虎的顯示廣告管理平台。 銳3端口實際上是最少的工作，我不得不這樣做，以產生一個新的版本！

這個例子是如何工作的

這個例子的核心是：（1）查詢生成器指定用戶可以對數據進行篩選和（2）延伸到Y.DataSource.Local實現過濾器的配置。 （服務器端分頁，你會過濾數據發送到服務器，並烤到您的SQL查詢。）

來配置查詢生成器，例如，首先定義一個變量，可以過濾列表：

 VAR var_list =
 [
	 {
		名稱：'標題'，
		 '字符串'，類型：
		文字：“標題”
	 }，
	 {
		名稱：“今年，
		 “數”，類型：
		文字：'年'，
		驗證：“yiv整數：[0,2100]”
	 }，
	 {
		名稱：“數量”，
		 “數”，類型：
		文字：“數量”，
		驗證：“yiv整數：[0]'
	 }
 ;

每個變量被分配一個名稱（DataTable中的列配置的關鍵匹配）和類型。 默認的類型是'字符串'，'號'，'選擇'，但你可以擴展構建自定義插件（ 見下文 ）。 對於您使用的每一種類型，你還必須定義一套操作：

 VAR OPS =
 {
	字符串：
	 [
		 {值：'包含'，文字：'包含'}，
		 {值：“開始”，文字：'開始'}，
		 {值：“兩端”，文字：“以'}
	 ]

	編號：
	 [
		 {值：“平等”的文字：'='}，
		 {值：“少”，文字：'<='}，
		值：“大”的文字：'> ='}
	 ]
 };

這指定的經營者，用戶可以適用於每個變量的類型。 （如果您需要兩套不同的運營商相同的基本類型的變量，你可以克隆的類型。見下文插件 。）

Y.FormManager使用前過濾器，以驗證用戶輸入的值。 為每個變量在上面的查詢生成器配置驗證密鑰提供CSS是由Y.FormManager解釋數據。

如果驗證通過，一個請求被發送到數據源。 擴展Y.DataSource.Local是很簡單的。 它只是過濾，然後返回結果的數據：

 y.extend（CustomDataSource，Y.DataSource.Local
 {
	 _defDataFn：功能（E）
	 {
		數據篩選數據（e.data，e.request.filter）;
		 VAR響應=
		 {
			結果：data.slice（e.request.recordOffset
						 e.request.recordOffset + e.request.rowsPerPage），
			元：
			 {
				總記錄：data.length
			 }
		 };

		 this.fire（“回應”，Y.mix（{響應：響應}，e）段）;
	 }
 }）;

請求的filter的元素是從獲得QueryBuilder.toDatabaseQuery()它返回列表[variable, operator, value]元組。 還注意到，回應必須包括信息的記錄總數，自從被應用於基於過濾器更改。

filterData()簡單地遍歷從元組toDatabaseQuery()申請在兩個級別的查找表中定義的過濾器運營：

 VAR過濾器
 {
	字符串：
	 {
		包含：函數（值，過濾器）
		 {
			回報（value.indexOf（過濾器）> = 0）;
		 }，
		 “開始”：功能（值，過濾器）
		 {
			返回（value.substr（，filter.length）==過濾器）;
		 }，
		 “兩端”：函數（值，過濾器）
		 {
			返回（value.substr（-filter.length的）==過濾器）;
		 }
	 }，

	編號：
	 {
		平等：函數（值，過濾器）
		 {
			回報（parseInt（價值10）== parseInt（過濾器，10））;
		 }，
		不足：功能（值，過濾器）
		 {
			回報（parseInt（價值10），<= parseInt（過濾器，10））;
		 }，
		更大的功能（價值，過濾）
		 {
			回報（parseInt（價值10），> = parseInt（過濾器，10））;
		 }
	 }
 };

這一切之後，DataTable的簡單顯示，它從數據源接收。

插件

Y.QueryBuilder.plugin_mapping定義類型的名稱映射到實際的類。 你可以增加這種映射有兩種方式：

1. 克隆現有類型定義為同一類的新名稱。 這允許不同的運營商相同的基本類型不同的變量集。
2. 通過實施創建一個新的類型的插件API 。 研究現有插件的源代碼是最好的方式來獲得這個API是如何工作的感覺。

概括查詢生成器

查詢生成器不支持括號，所以你可以與所有的條件或或全部條件。 雖然這是我所見過的所有設計都可以引入一個布爾表達式的圖形表示括號，使用過於繁瑣。 文本表示是更簡單，更容易操縱。 “表達式生成器，查詢生成器集成到一個部件，它允許建設，而不必記住語法或手工一切文本表示。

關於作者簡介：： 約翰Lindal （ @ jafl5272在Twitter）是雅虎建設的基礎上率先工程師之一 APT是建成。 此前，他曾在雅虎出版商網絡。

找到的談話： bloglines technorati

共享和擴展： 書籤del.icio.us Digg它！ | reddit！