摘要:Linq To Javascript 以選取縣市下拉式清單為例
其實大概在去年就看過相關文章,
也看過其他前輩寫的文章,
真的是挺方便的套件.
只是苦無時間可以實作來玩一下,
趁著連假就動動手來玩玩.
如果有碰過LINQ的朋友或前輩們一定不陌生,
我相信LINQ在對物件集合的操作上真的是太方便了
不論排序,條件搜尋,等等...etc
而且該套件提供了90個方法,簡直是太威了))))
並有兩種版本linq.js 和 jquery.linq.js (jQuery plugin)
詳細說明請看官網說明,真的是太棒棒了~~
如果熟悉LINQ,那更是無縫接軌~~
接下來就是實作的部份,
如果有任何不當或者有更好的方式
也請前輩不吝指導.
小弟我是從NUGET上取得此套件
如何透過NUGET取得套件至Visual studio 請點我~
一.新增JSON資料
var jsonCity = {
"results": {
"table": [
{
"city": {
"sortkey":1,
"id": "KeelungList",
"name": "基隆市"
}
},
{
"city": {
"sortkey": 2,
"id": "TaipeiCityList",
"name": "臺北市"
}
},
{
"city": {
"sortkey":3,
"id": "TaipeiList",
"name": "新北市"
}
},
{
"city": {
"sortkey": 4,
"id": "TaoyuanList",
"name": "桃園縣"
}
},
{
"city": {
"sortkey": 5,
"id": "HsinchuCityList",
"name": "新竹市"
}
},
{
"city": {
"sortkey": 6,
"id": "HsinchuList",
"name": "新竹縣"
}
},
{
"city": {
"sortkey": 7,
"id": "MiaoliList",
"name": "苗栗縣"
}
},
{
"city": {
"sortkey": 8,
"id": "TaichungList",
"name": "臺中市"
}
},
{
"city": {
"sortkey": 9,
"id": "ChanghuaList",
"name": "彰化縣"
}
},
{
"city": {
"sortkey": 10,
"id": "NantouList",
"name": "南投縣"
}
},
{
"city": {
"sortkey": 11,
"id": "YunlinList",
"name": "雲林縣"
}
},
{
"city": {
"sortkey": 12,
"id": "ChiayiCityList",
"name": "嘉義市"
}
},
{
"city": {
"sortkey": 13,
"id": "ChiayiList",
"name": "嘉義縣"
}
},
{
"city": {
"sortkey": 14,
"id": "YilanList",
"name": "宜蘭縣"
}
},
{
"city": {
"sortkey": 15,
"id": "HualienList",
"name": "花蓮縣"
}
},
{
"city": {
"sortkey": 16,
"id": "TaitungList",
"name": "臺東縣"
}
},
{
"city": {
"sortkey": 17,
"id": "TainanList",
"name": "臺南市"
}
},
{
"city": {
"sortkey": 18,
"id": "KaohsiungCityList",
"name": "高雄市"
}
},
{
"city": {
"sortkey": 19,
"id": "PingtungList",
"name": "屏東縣"
}
},
{
"city": {
"sortkey": 20,
"id": "MatsuList",
"name": "連江縣"
}
},
{
"city": {
"sortkey": 21,
"id": "KinmenList",
"name": "金門縣"
}
},
{
"city": {
"sortkey": 22,
"id": "PenghuList",
"name": "澎湖縣"
}
}
]
}
};
二.透過LINQJS將JSON資料讀入並先取得所要的欄位
/*
透過LinqJs 將JSON讀入
並透過OrderByDescending使用sortkey排序
select當中所回傳的欄位
就像是SQL query的選取特定欄位一樣
不需要的欄位不見得要取出
*/
var QueryResult = Enumerable.From(jsonCity.results.table)
.OrderByDescending(function (x) {x.city.sortkey })
.Select(function (x) {
viewData = { Name: x.city.name, Id: x.city.id };
return viewData
});
三.新增一個function,透過QueryResult,將縣市資料取出,放置下拉式清單中
/*下拉縣市清單
透過LinqJs將QueryResult
轉為Array
並將值取出
*/
appendSelectCity = function () {
var sortdata = QueryResult.ToArray();
$.each(sortdata, function (i, item) {
$("#city").append(''); }); }
四.新增一個function,將下拉式清單所選取的值,放置QueryResult做搜尋條件
/*
取得所選取的縣市ID
放入QueryResult做為搜尋條件
並轉為array
*/
SelectCitynum = function (ele) {
var Cityid = $(ele).find("option:selected").attr('id');
var Seleced = QueryResult.Where(function (x) { return x.Id == Cityid }).ToArray();
$("#sele").text('縣市名稱:' + Seleced[0].Name + ' 縣市ID:' + Seleced[0].Id);
}
接下來看看執行的畫面是不是如預期一般
在body onload的事件中的這個appendSelectCity來看,
確實是將所有資料依序列出,
排序方式也是照剛剛所指定的DESC,
且欄位也是所自定義的欄位.
那看看加入搜尋條件
在select 中的onchange事件
裡的SelectCitynum的這個function
將所選取的ID放入QueryResult做搜尋條件
確實搜尋出相對應的值
真的是很方便,
在前端上就可以輕鬆的對JSON物件做操作
作者所提供的方法,我相信在實務上也會有更多的操作
再此附上