JQury 實用代碼(需不斷更新)

JQuery 代碼

1. map 方法¶

根據數組中的元素，嵌入構造方法，返回新元素組成的數組對象。

function getSelectedDataItems() {
    if (!selectionModel) {
        throw "Selection model is not set";
    }

    var items;
    if (data.getItemByIdx) {
        //when dataview is parametered...
        items = selectedRows.map(function (x) {
            return data.getItemByIdx(x);
        });
    }
    else {
        items = jQuery.map(selectedRows, function (x) {
            return getDataItem(x);
        });
    }
    return items;
}

2. grep 方法

條件篩選當前數組元素，返回篩選後的數組對象，是常見的數組條件過濾方法。

function getCheckedDataItems() {
    if (!selectionModel) {
        throw "Selection model is not set";
    }

    var items;
    if (data.getItems) {
        //when dataview is parametered...
        var rows = data.getItems();
        items = jQuery.grep(rows, function (x) {
            return x.checked == true;
        });
    }
    else {
        items = jQuery.grep(data, function (x) {
            return x.checked == true;
        });
    }
    return items;
}

3. 對象數組的深拷貝

defaultFilterItems 數組中包含對象，clonedArray 是該數組的拷貝，利用了jQuery數組的Map方法，然後進行對象的拷貝即可。

var defaultFilterItems = [
   {
       ID: specialDefaultItem.BLANK,
       Text: "(空值)",
       itemValueType: "blank",
       checked: "false" 
   },
   {
       ID: specialDefaultItem.NONBLANK,
       Text: "(非空值)",
       itemValueType: "non-blank",
       checked: "false" 
   },
   {
       ID: specialDefaultItem.ALL,
       Text: "(全部)",
       itemValueType: "all",
       checked: "false" 
   }
];

var clonedArray = $.map(defaultFilterItems, function (obj) {
    return $.extend(true, {}, obj);
});

4. 獲取URL中的QueryString數值

$.extend({
  getUrlVars: function(){
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
      hash = hashes[i].split('=');
      vars.push(hash[0]);
      vars[hash[0]] = hash[1];
    }
    return vars;
  },
  getUrlVar: function(name){
    return $.getUrlVars()[name];
  }
});

示例：

// Get object of URL parameters
var allVars = $.getUrlVars();

// Getting URL var by its nam
var byName = $.getUrlVar('name');

5. 前端發起AjaxGet請求，JSON數據封裝處理

//javascript file 
var data = { UserID: "10", UserName: "Long", AppInstanceID: "100", ProcessGUID: "BF1CC2EB-D9BD-45FD-BF87-939DD8FF9071" };
var request = JSON.stringify(data);
request = encodeURIComponent(request);
doAjaxGet("/ProductSys.WebApi/api/Workflow/StartProcess?data=", request, function (result) {
    window.console.log(result);
});

後端接收處理

//webapi file:
[HttpGet]
public ResponseResult StartProcess()
{
    dynamic queryJson = ApiRequestUtility.ParseHttpGetJson(Request.RequestUri.Query);
    int appInstanceID = int.Parse(queryJson.AppInstanceID.Value);
    Guid processGUID = Guid.Parse(queryJson.ProcessGUID.Value);
    int userID = int.Parse(queryJson.UserID.Value);
    string userName = queryJson.UserName.Value;
}

/// <summary>
/// 獲取HttpGet的Json格式的Query對象
/// </summary>
/// <param name="query">原始query
/// 格式：api/product/get?data=...
/// </param>
/// <returns></returns>
public static dynamic ParseHttpGetJson(string query)
{
    if (!string.IsNullOrEmpty(query))
    {
        try
        {
            var json = query.Substring(7, query.Length - 7);
            json = System.Web.HttpUtility.UrlDecode(json);
            dynamic queryJson = JsonConvert.DeserializeObject<dynamic>(json);

            return queryJson;
        }
        catch (System.Exception e)
        {
            throw new ApplicationException("無法正確解析HttpGet的JSON對象！", e);
        }
    }
    else
    {
        return null;
    }
}

6. 性能測試時的時間函數

var start = new Date().getTime();

var timeElapsed = new Date().getTime() - start;
window.console.log('update row time: ' + timeElapsed);

7. 生成隨機數

var uid = "slickgrid_" + Math.round(1000000 * Math.random());