一、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;
});
91
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
