62,046
社区成员
发帖
与我相关
我的任务
分享ext：gridPanel中如何添加新行？
在改个ext.net组建的程序，一个页面，外加一个用户控件作为弹出的窗口，
主页面就是一个ext:GridPanel 展示几条从数据库读取的数据， 在每条数据最后有个按钮，点了会弹出小窗口
里面显示选中数据的详细值，以及可以修改，删除，添加新数据。
现在修改删除都没问题，唯独不知道怎么添加新行。而且新id怎么取也没有思路，大家帮帮忙~
Test2.aspx
主页面就是一个ext:GridPanel 展示几条从数据库读取的数据， 在每条数据最后有个按钮，点了会弹出小窗口
里面显示选中数据的详细值，以及可以修改，删除，添加新数据。
现在修改删除都没问题，唯独不知道怎么添加新行。而且新id怎么取也没有思路，大家帮帮忙~
Test2.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test2.aspx.cs" Inherits="Test2" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Register src="WindowEditor.ascx" tagname="WindowEditor" tagprefix="uc1" %>
<!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 id="Head1" runat="server">
<title></title>
<script type="text/javascript">
debugger;
var CompanyX = {
_index: 0,
getIndex: function () {
return this._index;
},
setIndex: function (index) {
if (index > -1 && index < GridPanel1.getStore().getCount()) {
this._index = index;
}
},
getRecord: function () {
var rec = GridPanel1.getStore().getAt(this.getIndex()); // Get the Record
if (rec != null) {
return rec;
}
},
edit: function (index) {
this.setIndex(index);
this.open();
},
next: function () {
this.edit(this.getIndex() + 1);
},
previous: function () {
this.edit(this.getIndex() - 1);
}
};
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server" Title="User" StripeRows="true" Frame="true"
Height="300">
<Store>
<ext:Store ID="Store1" runat="server" RemoteSort="true" OnRefreshData="Store1_RefreshData">
<Proxy>
<ext:PageProxy />
</Proxy>
<Reader>
<ext:JsonReader IDProperty="Id">
<Fields>
<ext:RecordField Name="StudentID" Type="Int" />
<ext:RecordField Name="Firstname" Type="String" />
<ext:RecordField Name="Lastname" Type="String" />
<ext:RecordField Name="Dob" Type="Auto" />
<ext:RecordField Name="Gender" Type="Auto" />
</Fields>
</ext:JsonReader>
</Reader>
<BaseParams>
<ext:Parameter Name="start" Value="0" Mode="Raw" />
<ext:Parameter Name="limit" Value="10" Mode="Raw" />
<ext:Parameter Name="sort" Value="" />
<ext:Parameter Name="dir" Value="" />
</BaseParams>
<SortInfo Field="StudentID" Direction="ASC" />
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ColumnID="stu_id" Header="Student ID" DataIndex="StudentID" Align="Center"
Width="80px" />
<ext:Column ColumnID="stu_first" Header="First Name" DataIndex="Firstname" Align="Center"
Width="150px" />
<ext:Column ColumnID="stu_last" Header="Last Name" DataIndex="Lastname" Align="Center"
Width="150px" />
<ext:Column ColumnID="stu_Dob" Header="Date of birth" DataIndex="Dob" Align="Center"
Width="150px" />
<ext:Column ColumnID="stu_gender" Header="Gender" DataIndex="Gender" Align="Center"
Width="75px" />
<ext:CommandColumn Width="35">
<Commands>
<ext:GridCommand Icon="NoteEdit" CommandName="Edit">
<ToolTip Text="Edit" />
</ext:GridCommand>
</Commands>
</ext:CommandColumn>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
</SelectionModel>
<BottomBar>
<ext:PagingToolbar ID="PagingToolBar1" runat="server" PageSize="10" DisplayInfo="true"
DisplayMsg="Displaying Students {0} - {1} of {2}" EmptyMsg="No Users to display" />
</BottomBar>
<Listeners>
<Command Handler="CompanyX.edit(rowIndex);" />
</Listeners>
<LoadMask ShowMask="true" />
</ext:GridPanel>
</div>
<uc1:WindowEditor ID="WindowEditor1" runat="server" />
</form>
</body>
</html>
...全文
请发表友善的回复…
发表回复
TyrionLannister 2012-03-04
- 打赏
- 举报
你这样写的话。数据只是在客户端变化，并没有更新数据库
根据ext网站的例子，参见这个页面：
http://examples.ext.net/#/GridPanel/Miscellaneous/Details_Window_Remote/
这个是更改后会自动上上传到服务器的，而且是ajax请求
你的问题，代码大概应该是
根据ext网站的例子，参见这个页面：
http://examples.ext.net/#/GridPanel/Miscellaneous/Details_Window_Remote/
这个是更改后会自动上上传到服务器的，而且是ajax请求
你的问题，代码大概应该是
protected void AddEmployee(object sender, DirectEventArgs e)
{
StudentCollection coll1 = new StudentCollection();
StudentQuery sq = new StudentQuery("select max(StudentID) from [Student] ");
coll1.Load(sq);
int maxID = (int)(coll1[0].StudentID);
StudentCollection coll2 = new StudentCollection();
coll2.AddNew();
coll2[0].StudentID = maxID + 1;
coll2[0].Firstname = this.stu_first.Text;
coll2[0].Lastname = this.stu_last.Text;
coll2[0].Dob = this.stu_Dob.SelectedDate;
coll2[0].Gender = this.stu_gender.Text;
coll2.Save();
this.GridStore.DataBind();
this.winDetails.Hide();
}
huendan05 2012-03-01
- 打赏
- 举报
怎么回事
shanechan517 2012-03-01
- 打赏
- 举报
没人知道么...
shanechan517 2012-03-01
- 打赏
- 举报
沉得好快
shanechan517 2012-03-01
- 打赏
- 举报
Test2.aspx.cs
using System;
using System.Collections;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using BusinessObjects;
using Ext;
using Ext.Net;
public partial class Test2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// ASP.NET, Javascript and Database Skills
//Implement Filtering, Sorting and Paging for Gridview
//Tip. Data Access layer is being implemented and focus how to implement interact among ASP.NET, JavaScript and Database
//http://examples.ext.net/#/GridPanel/Plugins/GridFilters_Remote/
//http://examples.ext.net/#/GridPanel/Miscellaneous/Details_Window/
//Remember to use entityspaces object StudentCollection as your data access object.
}
protected void Store1_RefreshData(object sender, Ext.Net.StoreRefreshDataEventArgs e)
{
StudentCollection coll = new StudentCollection();
coll.LoadAll();
int i = coll.Count;
Console.WriteLine("count=" + i);
//paging,sorting
List<Student> data = (List<Student>)coll;
//-- start sorting ------------------------------------------------------------
if (!string.IsNullOrEmpty(e.Sort))
{
data.Sort(delegate(Student x, Student y)
{
object a;
object b;
int direction = e.Dir == Ext.Net.SortDirection.DESC ? -1 : 1;
a = x.GetType().GetProperty(e.Sort).GetValue(x, null);
b = y.GetType().GetProperty(e.Sort).GetValue(y, null);
return CaseInsensitiveComparer.Default.Compare(a, b) * direction;
});
}
//-- end sorting ------------------------------------------------------------
//-- start paging ------------------------------------------------------------
int limit = e.Limit;
if ((e.Start + e.Limit) > data.Count)
{
limit = data.Count - e.Start;
}
List<Student> rangeData = (e.Start < 0 || limit < 0) ? data : data.GetRange(e.Start, limit);
//-- end paging ------------------------------------------------------------
e.Total = data.Count;
this.Store1.DataSource = rangeData;
}
}
最后是user control:
windowsEditor.ascx
<%@ Control Language="C#" %>
<%@ Import Namespace="BusinessObjects" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server" language="c#">
protected void Page_Load(object sender, EventArgs e)
{
StudentCollection coll = new StudentCollection();
coll.LoadAll();
this.StudentStore.DataSource = coll;
this.StudentStore.DataBind();
}
</script>
<script type="text/javascript">
Ext.applyIf(CompanyX, {
open : function () {
rec = this.getRecord();
if (rec != null) {
win = <%= winDetails.ClientID %>;
win.show();
win.setTitle(String.format("Student Details : {0}, {1}", rec.data.LastName, rec.data.FirstName));
<%= stu_id.ClientID %>.setValue(rec.data.StudentID);
//document.write(rec.id);
//student
<%= stu_first.ClientID %>.setValue(rec.data.Firstname);
<%= stu_last.ClientID %>.setValue(rec.data.Lastname);
<%= stu_Dob.ClientID %>.setValue(rec.data.Dob);
<%= stu_gender.ClientID %>.setValue(rec.data.Gender);
}
},
save : function () {
var rec = this.getRecord();
if (rec != null) {
rec.set("Firstname", <%= stu_first.ClientID %>.getValue());
rec.set("Lastname", <%= stu_last.ClientID %>.getValue());
rec.set("Dob", <%= stu_Dob.ClientID %>.getValue());
rec.set("Gender", <%= stu_gender.ClientID %>.getValue());
}
win.hide(null);
},
del : function () {
var rec = GridPanel1.getStore().removeAt(this.getIndex());
win.hide(null);
},
add : function () {
var rec = this.getRecord();
//var stu=new Student();
//var grid = <%= GridPanel1.getStore().ClientID %>
grid.insertRecord(0,rec);
//get the total number
//temp 100
//rec.set("StudentID", StudentStore.getCount()+1);
//stu.set("StudentID", GridPanel1.getStore().getCount()+1);
//stu.set("Firstname", <%= stu_first.ClientID %>.getValue());
//stu.set("Lastname", <%= stu_last.ClientID %>.getValue());
//stu.set("Dob", <%= stu_Dob.ClientID %>.getValue());
//stu.set("Gender", <%= stu_gender.ClientID %>.getValue());
//GridPanel1.getStore().InsertRecord(StudentStore.getCount(),stu);
win.hide(null);
}
}
);
</script>
<ext:Store ID="StudentStore" runat="server">
<Reader>
<ext:JsonReader IDProperty="EmployeeID">
<Fields>
<ext:RecordField Name="StudentID" Type="Int" />
<ext:RecordField Name="Firstname" Type="String" />
<ext:RecordField Name="Lastname" Type="String" />
<ext:RecordField Name="Dob" Type="Auto" />
<ext:RecordField Name="Gender" Type="Auto" />
</Fields>
</ext:JsonReader>
</Reader>
<BaseParams>
<ext:Parameter Name="recordTotal" Value="0" Mode="Value" />
</BaseParams>
</ext:Store>
<ext:Window ID="winDetails" runat="server" Title="Employee Details" Icon="Group"
Width="400" Height="400" Modal="true" Hidden="true" Layout="Fit">
<Items>
<ext:Panel ID="StudentInfo" runat="server" Border="false">
<Items>
<ext:TextField ID="stu_id" runat="server" FieldLabel="StudentID" Width="250" Disabled="true" />
<ext:TextField ID="stu_first" runat="server" FieldLabel="First Name" Width="250" />
<ext:TextField ID="stu_last" runat="server" FieldLabel="Last Name" Width="250" />
<ext:DateField ID="stu_Dob" runat="server" Width="250" FieldLabel="Date of Birth"
Format="yyyy-MM-dd" />
<ext:ComboBox ID="stu_gender" runat="server" StoreID="StudentStore" FieldLabel="Gender"
AllowBlank="false" Mode="Local" ForceSelection="true" TriggerAction="All" EmptyText="Select an employee..."
Width="250">
<Items>
<ext:ListItem Text="Male" Value="M" />
<ext:ListItem Text="Female" Value="F" />
</Items>
</ext:ComboBox>
</Items>
</ext:Panel>
</Items>
<Buttons>
<ext:Button ID="btnPrevious" runat="server" Text="Previous" Icon="PreviousGreen">
<Listeners>
<Click Handler="CompanyX.previous();" />
</Listeners>
</ext:Button>
<ext:Button ID="btnAdd" runat="server" Text="Add" Icon="Add">
<Listeners>
<Click Handler="CompanyX.add();" />
</Listeners>
</ext:Button>
<ext:Button ID="btnSave" runat="server" Text="Save" Icon="Disk">
<Listeners>
<Click Handler="CompanyX.save();" />
</Listeners>
</ext:Button>
<ext:Button ID="btnCancel" runat="server" Text="Cancel" Icon="Cancel">
<Listeners>
<Click Handler="#{winDetails}.hide();" />
</Listeners>
</ext:Button>
<ext:Button ID="btnNext" runat="server" Text="Next" Icon="NextGreen">
<Listeners>
<Click Handler="CompanyX.next();" />
</Listeners>
</ext:Button>
<ext:Button ID="btnDel" runat="server" Text="Delete" Icon="Delete">
<Listeners>
<Click Handler="CompanyX.del();" />
</Listeners>
</ext:Button>
</Buttons>
</ext:Window>
其中 studentCollection负责管理与数据库的连接取值
目前 add:function里面不知道怎么写了...
