概 述
ayGrid是一个基于jQuery的表格插件，可实现在表格上在线修改、增加、删除、保存数据！其中，单元格的编辑可以实现CheckBox、ComboBox、Input的输入方式。表格数据传输基于JSON。
如何使用
第一节 - 安 装
- 加载JQuery文件。这个是必须的，否则无法运行ayGrid。.
<script type="text/javascript" src="jquery-1.4.4.min.js"></script> - 加载ayGrid文件。这个是基于jQuery插件文件，也是必须的。
<script type="text/javascript" src="jquery.aygrid.v0.0.1.js"></script>
第二节 - 前端设置
View Code
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="../Scripts/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../Scripts/jquery.aygrid.v0.0.1/jquery.aygrid.v0.0.1(修改后).js"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
$(document).ready(function () {
$("#table1").ayGrid({
// dataJsonUrl: 'aygrid.php?pro=getStu',
// columnListDataUrl: { 'department': 'aygrid.php?pro=dpt' },
//id:"ayGridStudent",
columnListDataUrl:{},
columnHeader: [<%=columnHeader %>],
columnType: { 'stuID': 'CheckBox', 'stuName': 'Input', 'stuSexName': 'CombBox', 'stuAge': 'Input','birthday': 'Input' },
columnWidth: { 'stuID': 25, 'stuName': 75, 'stuSexName': 85, 'stuAge': 30,'birthday': 60 },
//columnListData: { 'stuName': 75, 'department': 85, 'creditHour': 30, 'passed': 25, 'mydate': 60 },
//columnListData: { 'department': { 'v13': 'vlaue13', 'v23': 'vlaue23', 'v33': 'vlaue33', 'v43': 'vlaue43'} },
columnListData: { 'stuSexName': <%=str %> },
//columnListData:{ 'stuName': '75', 'department': '85', 'creditHour': '30', 'passed': '25', 'mydate': '60' },
//dataJson: [{ 'stuName': 'vlaue11', 'department': 'vlaue12', 'passed': 'v13', 'mydate': '1' },
// { 'stuName': 'vlaue21', 'department': 'vlaue22', 'passed': 'v23', 'mydate': '0'}],
dataJson:[<%=DataValue %>],
columnID: ['stuID', 'stuName', 'stuSexName', 'stuAge', 'birthday'], //
gridWitdh: 460,
gridHeigh: 450,
numberOfPage: 200,
toolsDisplay: true,
pagesDisplay: true,
rowKey: 'id',
rowDelete: function (mykey) {
if (mykey != undefined) alert(mykey);
},
gridSave: function (data) {
var newData = [], i = 0;
jQuery.each(data, function (key, dtRow) {
if (dtRow['id'] == undefined) {
newData[i] = dtRow;
i++;
}
});
// deleteRow: function () {
// if (ayGrid.activeRow != null && ayGrid.rowCount > 0) {
// var di = ayGrid.activeRow.data('index') - 1;
// var rkey = ayGrid.gridData[di][ayGrid.rowKey];
// ayGrid.rowDelete(rkey);
// ayGrid.gridData.splice(di, 1);
// ayGrid.activeRow = null;
// ayGrid.rowCount = ayGrid.rowCount - 1;
// ayGrid.createGrid();
// }
// });
jQuery.ajax({
type: "POST",
async: false,
//url: "aygrid.php?pro=add",
data: { data: newData },
cache: false
});
var dataValues="";
for(var j=0;j<newData.length;j++)
{
dataValues+=newData[j].stuID+","+newData[j].stuName+","+newData[j].stuSexName+","+newData[j].stuAge+","+newData[j].birthday+";";
}
$find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("Save;"+dataValues);
return false;
},
onCellChange: function (me, oldv, newv) {
var crm = jQuery('<div />'),
stuName = me.getValueByCid(me.rowIndex(), 'stuName'),
department = me.getValueByCid(me.rowIndex(), 'department'),
creditHour = me.getValueByCid(me.rowIndex(), 'creditHour'),
psd = me.getValueByCid(me.rowIndex(), 'passed'),
myKey = me.getRowKey(me.rowIndex());
if (myKey != undefined) crm.load("aygrid.php?pro=psd", { id: myKey, stuName: stuName, psd: psd, department: department, creditHour: creditHour });
}
});
}
);
function Submit()
{
//ayGridStudent
}
</script>
</telerik:RadCodeBlock>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
<AjaxSettings>
</AjaxSettings>
</telerik:RadAjaxManager>
<div id='table1' runat="server">
</div>
</form>
</body>
</html>
第二节 - 后台设置
View Code
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindAyGrid();
}
}
#region 绑定数据
private void BindAyGrid()
{
DataTable dataTable = StudentLogic.GetAllStudent().Tables[0];
StringBuilder sb = new StringBuilder();
DataColumnCollection column = dataTable.Columns;
foreach (DataRow row in dataTable.Rows)
{
sb.Append("{'" + column["stuID"] + "':'" + row["stuID"] + "','" + column["stuName"] + "':'" + row["stuName"] + "','" + column["stuSexName"] + "':'" + row["stuSexName"] + "','" + column["stuAge"] + "':'" + row["stuAge"] + "','" + column["birthday"] + "':'" + row["birthday"] + "'},");
}
if (sb.Length > 0)
{
DataValue = sb.ToString().Substring(0, sb.Length - 1);
}
}
#endregion
#region 事件
protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
{
string[] param = e.Argument.Split(';');
if (param[0] == "Save")
{
SaveData(param);
}
}
private void SaveData(string[] param)
{
bool result = true;
string[] stuArray;
StudentModel student = null;
for (int i = 1; i < param.Length - 1; i++)
{
stuArray = param[i].Split(',');
if (stuArray[0] == string.Empty && stuArray[1] == string.Empty && stuArray[2] == string.Empty && stuArray[3] == string.Empty && stuArray[4] == string.Empty)
{
continue;
}
student = new StudentModel();
int stuID = 0;
if (!int.TryParse(stuArray[0], out stuID))
{
stuID = 0;
}
student.StuID = stuID;
student.stuName = stuArray[1];
//if (stuArray[2] == "男")
//{
// student.stuSex = 1;
//}
//else
//{
// student.stuSex = 0;
//}
student.stuSex = Convert.ToInt32(stuArray[2]);
student.stuAge = Convert.ToInt32(stuArray[3]);
if (!string.IsNullOrEmpty(stuArray[4]))
{
student.birthday = Convert.ToDateTime(stuArray[4]);
}
else
{
student.birthday = null;
}
student.address = string.Empty;
if (student.StuID > 0)//修改
{
result &= StudentLogic.UpdateStudent(student);
}
else//新增
{
result &= StudentLogic.AddStudent(student);
}
}
if (result)
{
ClientScript.RegisterStartupScript(GetType(), "this", "alert('保存成功！');", true);
}
}
#endregion
#region 属性
///<summary>
/// 列表头
///</summary>
public string columnHeader
{
get
{
return "'','姓名', '性别', '年龄', '生日'";
}
}
///<summary>
/// 列表头
///</summary>
public string DataValue
{
get
{
if (ViewState["DataValue"] == null)
return string.Empty;
return ViewState["DataValue"].ToString();
}
set
{
ViewState["DataValue"] = value;
}
}
///<summary>
///
///</summary>
public string str
{
get
{
return "{ '0': '女', '1': '男'}";
}
}
#endregion