學習jsGrid、requirejs、jquery.validate.min、jquery-ui的試驗程式碼
阿新 • • 發佈:2018-11-11
一、html頁面程式碼:
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" /> <link type="text/css" rel="stylesheet" href="/Content/jsgrid.min.css" /> <link type="text/css" rel="stylesheet" href="/Content/jsgrid-theme.min.css" /> <link type="text/css" rel="stylesheet" href="/Content/jquery-ui.theme.min.css" /> <link type="text/css" rel="stylesheet" href="/Content/jquery-ui.min.css" /> <script data-main="/Scripts/app/app" src="/Scripts/require.js"></script> <title>ListGrid1</title> <style type="text/css"> .row { height: 40px; width: 100%; position: relative; float: left } label { width: 80px; padding: 5px } input { width: 120px; height: 30px } span.error { color: red } input.error { border: 1px dotted red; } input.success { background: #ccc; } </style> </head> <body> <div id="jsGrid"></div> <div id="detailsDialog" hidden="hidden" style="padding:10px" title="資料編輯"> <form id="detailsForm" method="get" action=""> <div class="row"> <label for="name" >name</label><input type="text" id="name" name="name"/> </div> <div class="row"> <label for="age">age</label><input type="text" id="age" name="age"/> </div> <div class="row"> <label for="address">address</label><input type="text" id="address" name="address"/> </div> <div class="row"> <label for="country">country</label><input type="text" id="country" name="country"/> </div> <div class="row"> <label for="married">ismarried</label><input type="checkbox" id="married"/> </div> <div class="row"> <input class="submit" type="submit" value="提交" id="smit"> </div> </form> <div class="row" id="errrow"> <span hidden="hidden" style="color:red">error</span> </div> </div> </body> </html>
requirejs配置及入口函式程式碼,該程式碼儲存為檔案app.js
requirejs.config({ baseUrl: '/Scripts', paths: { app: '/Scripts/app', jquery: '/Scripts/jquery-1.10.2.min', 'jquery.ui': '/Scripts/jquery-ui.min', 'jquery.validate.min': '/Scripts/jquery.validate.min', 'jsGrid': '/Scripts/jsgrid.min' }, shim: { 'jsGrid': { deps: ['jquery'] }, 'jquery.validate.min': { deps: ['jquery'] } } }); requirejs(['app/main']);
主模組單元程式碼,該模組命名為main.js
define(['jquery', 'jsGrid','jquery.validate.min','jquery.ui','app/dialog','app/CustomerDateField'], function ($, jsG,ju,jv,dialog,customerField) { $(document).ready(function () { var cnmsg = { required:"必選欄位", remote: "請修正該欄位", email: "請輸入正確格式的電子郵件", url:"請輸入合法的網址", date:"請輸入合法的日期", dateISO:"請輸入合法的日期(ISO).", number: "請輸入合法的數字", digits: "只能輸入整數", creditcard: "請輸入合法的信用卡號", equalTo: "請再次輸入相同的值", accept: "請輸入擁有合法字尾名的字串", maxlength: $.format("請輸入一個長度最多是 {0} 的字串"), minlength: $.format("請輸入一個長度最少是 {0} 的字串"), rangelength: $.format("請輸入一個長度介於 {0} 和 {1} 之間的字串"), range: $.format("請輸入一個介於 {0} 和 {1} 之間的值"), max: $.format("請輸入一個最大為 {0} 的值"), min: $.format("請輸入一個最小為 {0} 的值") }; $.extend($.validator.messages, cnmsg); $("#smit").click(function () { alert("click"); }); //=============form submit 事件 響應函式========================== $("#detailsForm").submit(function (e) { $("form").validate().form(); if ($("#detailsForm").valid()) { e.preventDefault(); values = { Name: $("#name").val(), Age: $("#age").val(), Address: $("#address").val(), Country: $("#country").val(), Married: $("#married").prop("checked") }; editItem = $.extend(editItem, values); dialog.submitData(editItem); } }) //==================外掛驗證一直不對哈,明顯未通過驗證也不提示錯誤========================= //==================注意哈,html元素必須設定name屬性,且值和id的一直,才能有驗證效果哦========== $("#detailsForm").validate({ errorClass: "error", validClass: "success", errorElement: "span", wrapper: "li", errorLabelContainer: $("#errrow span"), errorContainer: $("#errrow"), rules: { name: { required: true }, age: { range: [18, 150], number:true }, address: { required: true, minlength: 10 }, country: "required" }, messages: { Name: "Please enter name", Age: "Please enter valid age", Address: "Please enter address (more than 10 chars)", Country: "Please select country" }, submitHandler: function (form) { $.noop; } }); /* var clients = [ { "Name": "Otto Clay", "Age": 25, "Country": 1, "Address": "Ap #897-1459 Quam Avenue", "Married": false }, { "Name": "Connor Johnston", "Age": 45, "Country": 2, "Address": "Ap #370-4647 Dis Av.", "Married": true }, { "Name": "Lacey Hess", "Age": 29, "Country": 3, "Address": "Ap #365-8835 Integer St.", "Married": false }, { "Name": "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true }, { "Name": "Ramona Benton", "Age": 32, "Country": 3, "Address": "Ap #614-689 Vehicula Street", "Married": false } ]; */ var countries = [ { Name: "", Id: 0 }, { Name: "United States", Id: 1 }, { Name: "Canada", Id: 2 }, { Name: "United Kingdom", Id: 3 } ]; $("#detailsDialog").dialog({ autoOpen: false, width: 400, close: function () { $("#detailsForm").validate().resetForm(); //$("#detailsForm").find(".error").removeClass("error"); } }); //var dialog = require(["app/dialog"]); $("#jsGrid").jsGrid({ width: "100%", height: "400px", filtering: true, inserting: false, editing: true, sorting: true, paging: true, pageLoading: true, pageSize: 8, autoload: false, deleteConfirm: "確認需要刪除資料?", loadMessage: "正在裝載資料,請稍候......", onItemInserting: function (args) { dialog.showDetailsDialog("insert", args.item); }, onItemDeleting: function (args) { try { item = args.item; dialog.deleteData(item); alert("the data will be delete"); } catch { args.cancel = true; } }, controller: { loadData: dialog.loadData }, rowRenderer: function (item, itemIndex) { //var trs = {}; $row = undefined; $col = undefined; var colors = ""; switch (itemIndex % 2) { case 0: $row = $("<tr>").addClass("jsgrid-alt-row").css("background-color", "#FFE4C4"); colors = "#FFE4C4"; break; case 1: $row = $("<tr>").addClass("jsgrid-row").css("background-color", "#F0F0F0"); colors = "#F0F0F0"; break; } var j= 0; for (i in item) { width = $("#jsGrid").jsGrid("option", "fields")[j].width; $col = $("<td>").addClass('jsgrid-cell jsgrid-align-center').css("width", String(width)+"px").css("background-color", colors); $row.append($col.append(item[i])); j++; } $col = $("<td>").addClass('jsgrid-cell jsgrid-control-field jsgrid-align-center').css("width", "50px").css("background-color", colors); $row.append($col.append($("<input>").addClass("jsgrid-button jsgrid-delete-button").attr("title", "delete").attr("type","button"))); return $row; //$("table tr:nth-child(even)").css("background-color", "#FFE4C4"); //$("table tr:nth-child(odd)").css("background-color", "#F0F0F0"); }, fields: [ { name: "Name", type: "text", width: 150, validate: "required" }, { name: "Age", type: "number", width: 50, validate: { validator: "range",param: [18,80]} }, { name: "Address", type: "text", width: 200 }, { name: "Country", type: "select", items: countries, valueField: "Id", textField: "Name" }, { name: "Married", type: "checkbox", title: "Is Married", sorting: false }, { name: "Born", type: "date", title: "Born Date", }, { type: "control", modeSwitchButton: true, editButton: false, width: 100, headerTemplate: function () { $button = $("<button>").attr("type", "button").text("Filter") .on("click", function () { $("#jsGrid").jsGrid("option", "filtering", !($("#jsGrid").jsGrid("option", "filtering"))); return false; }); //return $("p").html("kkkkk"); return $("<button>").attr("type", "button").text("Add") .on("click", function () { dialog.showDetailsDialog("Add", {}); }); } } ], rowClick: function(args) { dialog.showDetailsDialog("Edit", args.item); }, }); $("#jsGrid").jsGrid("loadData").done(function (e) { //================loadData事件在資料載入完畢且頁面渲染完畢後觸發==================== //================只有在繫結事件的物件已建立後新增事件才有實際作用================= $(".jsgrid-control-field").on("click", function () { alert("delete click!"); //=============取消事件冒泡========================= return false; }); }); }); })
彈出對話方塊物件及其應用部分程式碼,該部分程式碼命名為dialog.js
define(["jquery", "jquery.ui", "jsGrid", 'jquery.validate.min'], function ($,ju,jsGrid,jv) {
var formSubmitHandler = $.noop;
var datas = { "name": "test", "password": "test" };
var editItem = { Name: '', Age: '', Address: '', Country: '', Married: '' };
var oprResult = false;
var showDetailsDialog = function (dialogType, client) {
$("#name").val(client.Name);
$("#age").val(client.Age);
$("#address").val(client.Address);
$("#country").val(client.Country);
$("#married").prop("checked", client.Married);
$("#detailsDialog").dialog("option", "classes.ui-dialog", "highlight");
buttons = [{
text: "Ok",
icon: 'ui-icon-mail-open',
type: "submit",
value:"submit",
click: function () {
//$(this).dialog("close");
oprResult = true;
//$("form").validate().form();
if ($("#detailsForm").valid())
{
values = { Name: $("#name").val(), Age: $("#age").val(), Address: $("#address").val(), Country: $("#country").val(), Married: $("#married").prop("checked") };
editItem = $.extend(editItem, values);
submitData(editItem);
}
}
}];
var dl = $("#detailsDialog").dialog("option", "buttons", buttons);
dl.dialog("open");
};
var submitData = function (e) {
var i = $.Deferred();
updateData = { Name: e.Name, Age: e.Age, Country: e.Country, Address: e.Address, Married: e.Married };
$.ajax({
url: '/Grid/UpdateData',
type: 'put',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(updateData)
}
).done(function (e) {
alert('update data successed');
i.resolve(e);
$("#detailsDialog").dialog("close");
}).fail(function (e) {
alert('update failed!');
});
return i.promise();
};
var saveClient = function (client, isNew) {
$.extend(client, {
Name: $("#name").val(),
Age: parseInt($("#age").val(), 10),
Address: $("#address").val(),
Country: parseInt($("#country").val(), 10),
Married: $("#married").is(":checked")
});
$("#jsGrid").jsGrid(isNew ? "insertItem" : "updateItem", client);
$("#detailsDialog").dialog("close");
};
var loadData = function (e) {
var d = $.Deferred();
//=================服務端分頁需要將頁面索引傳遞到服務端=======================
pageSize = e.pageSize;
pageIndex = e.pageIndex;
$.ajax({
url: '/Grid/IndexData',
type: 'post',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(datas)
}
).done(function (e) {
alert('load data successed');
//===========================服務端分頁的話就沒必要取子集了=========================
subdata = e.slice(pageSize * (pageIndex - 1), pageSize * pageIndex);
pagingdata = { data: subdata, itemsCount: e.length };
d.resolve(pagingdata);
}).fail(function (e) {
alert('load failed!');
});
return d.promise();
};
var insertData = function (e) {
var d = $.Deferred();
$.ajax({
url: '/Grid/UpdateData',
type: 'put',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(e)
}
).done(function (data) {
alert('load data successed');
d.resolve(data);
}).fail(function (msg) {
alert('load failed:' + msg + "!");
});
return d.promise();
};
var deleteData = function (e) {
var d = $.Deferred();
$.ajax({
url: '/Grid/DeleteData',
type: 'delete',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(e)
}
).done(function (data) {
alert('delete data successed');
d.resolve(data);
}).fail(function (msg) {
alert('delete failed:' + msg + "!");
});
return d.promise();
}
return {
showDetailsDialog,
saveClient,
loadData,
submitData,
insertData,
deleteData
}
});
為jsGrid增加自定義欄位部分的程式碼,該程式碼命名為:CustomerFieldDate.js
define(["jquery", "jsGrid"], function ($) {
var CustomerDateField = function (config) {
jsGrid.Field.call(this, config);
};
Date.prototype.Format = function (fmt) { //author: meizz
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小時
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
CustomerDateField.prototype = new jsGrid.Field({
align: "center", // redefine general property 'align'
CustomProperty: "foo", // custom property
sorter: function (date1, date2) {
return new Date(date1) - new Date(date2);
},
itemTemplate: function (value) {
return new Date(value).Format("yyyy-MM-dd");
},
insertTemplate: function (value) {
return this._insertPicker = $("<input>").datepicker({ defaultDate: new Date() });
},
editTemplate: function (value) {
return this._editPicker = $("<input>").datepicker().datepicker("setDate", new Date(value));
},
insertValue: function () {
return this._insertPicker.datepicker("getDate").toISOString();
},
editValue: function () {
return this._editPicker.datepicker("getDate").toISOString();
}
});
jsGrid.fields.date = CustomerDateField;
});