Coolite一个简单例子-GridPanel列表增删改预览及在线编辑器
这个例子只是Coolite一个很简单的应用,我相信新手学习还是用的到的.也给大家带个头,写篇新手教程.
GridPanel就不作介绍了,asp.net开发人员应该比较熟悉了.官方的GridView绑定数据是通过SqlDataSource,ObjectDataSource等绑定的.
这里,GridPanel需要Store来绑定数据.首先在页面添加一个Store,如下:
<ext:Store ID="Store1" runat="server" OnRefreshData="RefreshData">
<Reader>
<ext:JsonReader ReaderID="Id">
<Fields>
<ext:RecordField Name="Id" />
<ext:RecordField Name="Title" />
<ext:RecordField Name="Content" />
<ext:RecordField Name="NewsTime" />
<ext:RecordField Name="Category" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
这里,我使用了JsonReader,还有ArrayReader,XmlReader.JsonReader绑定的数据格式是JSON类型的,这里在后台我绑定的是DataTable,关键部分Fields下面,Name指定的名字,必须和你后台要绑定的数据里字段名称一致.ReaderID我理解是相当于指定了一个主键吧.这里只是演示,看关键部分:
protected void Bind()
{
string sql = "SELECT NewsInfo.Id, NewsInfo.Title, NewsInfo.Content,NewsInfo.NewsTime, " +
"CategoryInfo.Category FROM NewsInfo, CategoryInfo WHERE NewsInfo.Category = CategoryInfo.Id order by NewsInfo.Id";
DataTable dt = DbHelper.GetDataTable(sql);
this.Store1.DataSource = dt;
this.Store1.DataBind();
}
不用去管,我的SQL语句怎么写的,返回DataTable就行了.和GridView一样,DataSource指定数据,然后DataBind(); OK,数据绑定完毕.一般情况下在Page_Load里调用.下面准备GridPanel吧.
<ext:GridPanel ID="GridPanel1" runat="server" Title="新闻列表" Width="840" AutoHeight="true"GridPanel的StoreID指定了数据从哪个Store来, Columns下面的<ext:Column里的DataIndex必须和指定的Store里的Name一致.
Frame="false" StoreID="Store1" Icon="Information">
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="Add" runat="server" Text="添加新闻" Icon="TableAdd">
<Listeners>
<Click Handler="News.BindNewsCate();#{Window1}.show();" />
</Listeners>
</ext:Button>
<ext:TextField ID="txtNewKey" runat="server" AllowBlank="false" EmptyText="请输入搜索关键字!">
</ext:TextField>
<ext:Button ID="btnSearch" runat="server" Text="查 找" Icon="Find">
<AjaxEvents>
<Click OnEvent="SearchNews">
<EventMask ShowMask="true" Msg="正在搜索..." />
</Click>
</AjaxEvents>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<ColumnModel runat="server" ID="ct102">
<Columns>
<ext:Column ColumnID="id" DataIndex="Id" Width="60" Header="序号" Hidden="false">
<PrepareCommand Handler="" Args="grid,command,record,row,col,value" FormatHandler="False">
</PrepareCommand>
</ext:Column>
<ext:Column ColumnID="title" DataIndex="Title" Width="150" Header="新闻标题">
<PrepareCommand Handler="" Args="grid,command,record,row,col,value" FormatHandler="False">
</PrepareCommand>
</ext:Column>
<ext:Column ColumnID="content" DataIndex="Content" Width="280" Header="新闻内容">
<PrepareCommand Handler="" Args="grid,command,record,row,col,value" FormatHandler="False">
</PrepareCommand>
</ext:Column>
<ext:Column ColumnID="category" DataIndex="Category" Width="100" Header="新闻分类">
<PrepareCommand Handler="" Args="grid,command,record,row,col,value" FormatHandler="False">
</PrepareCommand>
</ext:Column>
<ext:Column ColumnID="newsTime" DataIndex="NewsTime" Width="100" Header="发布时间">
<PrepareCommand Handler="" Args="grid,command,record,row,col,value" FormatHandler="False">
</PrepareCommand>
</ext:Column>
<ext:ImageCommandColumn Width="100" Header="操作" ColumnID="Comman" Resizable="true">
<Commands>
<ext:ImageCommand CommandName="Delete" Icon="TableDelete" Text="删除">
<ToolTip Text="Delete" />
</ext:ImageCommand>
<ext:ImageCommand CommandName="Edit" Icon="TableEdit" Text="编辑">
<ToolTip Text="Edit" />
</ext:ImageCommand>
</Commands>
<PrepareGroupCommand Handler="" Args="grid,command,groupId,group" FormatHandler="False">
</PrepareGroupCommand>
<PrepareCommand Fn="prepareCommand" />
</ext:ImageCommandColumn>
<ext:Column ColumnID="details" DataIndex="Id" Width="50" Header="预览" Sortable="false"
MenuDisabled="true">
<PrepareCommand Handler="" Args="grid,command,record,row,col,value" FormatHandler="False">
</PrepareCommand>
<Renderer Fn="details" />
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server" ID="rowselect">
</ext:RowSelectionModel>
</SelectionModel>
<LoadMask ShowMask="true" Msg="正在加载..." />
<BottomBar>
<ext:PagingToolbar runat="server" PageSize="15" StoreID="Store1" ID="paging">
</ext:PagingToolbar>
</BottomBar>
<Listeners>
<Command Fn="gridCommand" />
</Listeners>
<%--<AjaxEvents>
<Command OnEvent="OnCommand_Click">
<ExtraParams>
<ext:Parameter Name="type" Value="command" Mode="Raw">
</ext:Parameter>
<ext:Parameter Name="id" Value="record.data.Id" Mode="Raw">
</ext:Parameter>
</ExtraParams>
</Command>
</AjaxEvents>这里注释掉的部分就是,可以后台判断编辑删除的,Parameter是传向后台的参数--%>
</ext:GridPanel>
编辑与删除,我使用了ImageCommandColumn ,指定CommandName,执行Command时需要判断的.预览使用<Renderer Fn="details" />,自定义的.这里Fn指定的是JavaScript方法
function details(Id) {Id即每行数据的主键列,Readerer应该是在GridPanel初始化时执行的.SelectionModel指定列表选择模式,PagingToolbar分页工具栏.
var temp = '<a href="Details.aspx?Id={0}" target="_blank" style="color:blue">查看</a>';
return String.format(temp, Id);
}
var gridCommand = function(command, record, rowIndex) {
if (command == "Edit") {
var id = record.data.Id;
//通过id从后台获取content内容,并添加到fck里.
News.GetContentById(id, {
success: function(result) {
var Editor = FCKeditorAPI.GetInstance('FCKeditor2');
Editor.SetHTML(result);
}
});
var title = record.data.Title; //新闻标题
var category = record.data.Category; //新闻分类
//设置编辑窗的值
News.EditSetNews(id, title, category,
{
success: function(result) {
News.BindNewsCate();
Window2.show();
}
});
}
if (command == "Delete") {
Ext.Msg.confirm('提示', '是否确定删除该条新闻?', function(btn) {
if (btn == 'yes') {
News.DeleteNews(record.data.Id);
}
});
}
};
这里的参数列表按照这个的顺序就可以了,Args="grid,command,record,row,col,value" ,具体参数多少,视你的需求.command就是上面指定的CommandName,
这里就可以判断下了,是编辑还是删除操作.可以看到js里有一个News调用了一个后台AjaxMethod方法,News就相当于Coolite.AjaxMethods,如下:
<ext:ScriptManager ID="ScriptManager1" runat="server" AjaxMethodNamespace="News">
</ext:ScriptManager>
AjaxMethodNamespace 指定了News.GetContentById 给后台传递了Id,我希望能返回新闻的正文,因为我需要给编辑窗口赋值,编辑窗口我使用的是Fckeditor,
也是ASP.NET控件.var Editor = FCKeditorAPI.GetInstance('FCKeditor2'); 调用Fck的API,Editor.SetHTML(result); 将返回值赋给Fck对象.这里为什么要这样赋值,尝试这样做的朋友,应该清楚,通过Coolite的Ajax机制传值,在后台无法获取非Coolite控件的值.感谢zork的指导,呵呵.根据Id取出内容的代码就不贴了,后台标记为[AjaxMethod()]的方法,返回String.这里比较折腾人,其它字段,又需要到后台设置一下,News.EditSetNews.呵呵.希望有更好的解决办法.News.BindNewsCate();
这是我希望在点击编辑的时候,Winodw2 show出来之前,重新绑定下新闻分类,因为用户很可能这里在另一个页面添加了新分类.这里我提前在页面放了一个window:
<ext:Window ID="Window2" runat="server" AutoHeight="true" Width="800" Maximizable="true"
Modal="true" Title="编辑新闻" Icon="TableEdit" AutoShow="false">
<Body>
<ext:FormPanel ID="FormPanel2" runat="server" BodyStyle="padding:5px;" ButtonAlign="Right"
Frame="true" AutoHeight="true" AutoWidth="true" Icon="NewspaperAdd">
<Body>
<ext:FormLayout ID="FormLayout2" runat="server">
<ext:Anchor Horizontal="100%">
<ext:TextField ID="TextField2" runat="server" FieldLabel="新闻标题" AllowBlank="false"
BlankText="请输入新闻标题!">
</ext:TextField>
</ext:Anchor>
<ext:Anchor Horizontal="100%">
<ext:ComboBox ID="ComboBox2" runat="server" StoreID="Store2" DisplayField="Category"
AllowBlank="false" ValueField="Id" EmptyText="选择一项..." FieldLabel="新闻分类">
</ext:ComboBox>
</ext:Anchor>
<ext:Anchor Horizontal="%100">
<ext:Panel runat="server" ID="_editArea2" AutoWidth="true" Height="500">
<Body>
<FCKeditorV2:FCKeditor ID="FCKeditor2" runat="server">
</FCKeditorV2:FCKeditor>
</Body>
</ext:Panel>
</ext:Anchor>
<ext:Anchor Horizontal="%100">
<ext:Hidden ID="Hidden1" runat="server">
</ext:Hidden>
</ext:Anchor>
</ext:FormLayout>
</Body>
<Buttons>
<ext:Button ID="Button3" runat="server" Icon="Disk" Text="保存">
<Listeners>
<Click Fn="SaveNews" />
</Listeners>
</ext:Button>
<ext:Button ID="Button4" runat="server" Icon="Cancel" Text="取消">
<Listeners>
<Click Handler="Window2.hide();" />
</Listeners>
</ext:Button>
</Buttons>
</ext:FormPanel>
</Body>
</ext:Window>
AutoShow=”false”,页面加载不显示,<Click Fn="SaveNews" /> ,保存还是得获取编辑窗的值,还是使用js方法:
//保存编辑新闻
var SaveNews = function() {
var Editor = FCKeditorAPI.GetInstance('FCKeditor2');
var content = Editor.GetXHTML(true); //编辑器里的内容
News.EditSaveNews(content);
}
将编辑窗的值再传到后台,这里content是编辑窗的HTML源码,传到后台Coolite已经编码了,所以在后台保存到数据库之前,得解码一下,不然下次取出来,还是得解码.还有一个Hidden是为了保存编辑信息的ID,用于更新.
string newsContent = HttpUtility.HtmlDecode(content);
编辑功能到此为止.删除操作就相对简单些了,给个提示,YES就执行删除,同样调用后台删除方法.
[AjaxMethod()]
public void DeleteNews(int Id)
{
string sql = "delete from NewsInfo where Id = " + Id + "";
int result = DbHelper.ExecuteSql(sql);
if (result > 0)
{
//删除成功
Ext.Msg.Show(new MessageBox.Config
{
Title = "消息",
Message = "已成功删除指定新闻条目!",
Icon = MessageBox.Icon.INFO,
Buttons = MessageBox.Button.OK
});
this.Bind();//重新给Store指定数据
}
else
{
//删除失败
Ext.Msg.Show(new MessageBox.Config
{
Title = "消息",
Message = "删除新闻失败,请重新操作!",
Icon = MessageBox.Icon.ERROR,
Buttons = MessageBox.Button.OK
});
}
}
删除成功后,提示一下,然后重新Bind().预览查看,需要结合页面,这里就不谈了.也只是指定了一个预览路径.再来看下添加,我在Toolbar添加了一个Button,然后弹出预先准备的Window1:
<ext:Window ID="Window1" runat="server" AutoHeight="true" Width="800" Maximizable="true"
Modal="true" Title="添加新闻" Icon="TableAdd" AnimateTarget="Add">
<Body>
<ext:FormPanel ID="FormPanel1" runat="server" BodyStyle="padding:5px;" ButtonAlign="Right"
Frame="true" AutoHeight="true" AutoWidth="true" Icon="NewspaperAdd">
<Body>
<ext:FormLayout ID="FormLayout1" runat="server">
<ext:Anchor Horizontal="100%">
<ext:TextField ID="TextField1" runat="server" FieldLabel="新闻标题" AllowBlank="false"
BlankText="请输入新闻标题!" EmptyText="这里输入新闻标题.">
</ext:TextField>
</ext:Anchor>
<ext:Anchor Horizontal="100%">
<ext:ComboBox ID="ComboBox1" runat="server" StoreID="Store2" DisplayField="Category"
AllowBlank="false" ValueField="Id" EmptyText="选择一项..." FieldLabel="新闻分类">
</ext:ComboBox>
</ext:Anchor>
<ext:Anchor Horizontal="%100">
<ext:Panel runat="server" ID="_editArea" AutoWidth="true" Height="500">
<Body>
<FCKeditorV2:FCKeditor ID="FCKeditor1" runat="server" Value="">
</FCKeditorV2:FCKeditor>
</Body>
</ext:Panel>
</ext:Anchor>
</ext:FormLayout>
</Body>
<Buttons>
<ext:Button ID="Button1" runat="server" Icon="Disk" Text="发布">
<Listeners>
<Click Fn="addnews" />
</Listeners>
</ext:Button>
<ext:Button ID="Button2" runat="server" Icon="Cancel" Text="取消">
<Listeners>
<Click Handler="Window1.hide();" />
</Listeners>
</ext:Button>
</Buttons>
</ext:FormPanel>
</Body>
</ext:Window>
<Click Fn=”addnews”/>和编辑原理一样,获取编辑器里的内容,调用后台添加方法.添加之后也注意Bind()一下.还有一个功能就是搜索了,输入关键字,我这里是一个简单搜索,在Title和Content里搜索.
protected void SearchNews(object sender, AjaxEventArgs e)
{
string newkey = this.txtNewKey.Text;
if (newkey.Equals(""))
{
Ext.Msg.Show(new MessageBox.Config
{
Title = "提示",
Message = "请输入您要搜索的关键字!",
Buttons = MessageBox.Button.OK,
Icon = MessageBox.Icon.INFO
});
}
else
{
string sql = "SELECT NewsInfo.Id, NewsInfo.Title, NewsInfo.Content,NewsInfo.NewsTime, " +
"CategoryInfo.Category FROM NewsInfo, CategoryInfo WHERE NewsInfo.Category = CategoryInfo.Id " +
"and (NewsInfo.Title like '%" + newkey + "%' or NewsInfo.Content like '%" + newkey + "%') order by NewsInfo.Id";
DataTable dt = DbHelper.GetDataTable(sql, CommandType.Text, new OleDbParameter[] { });
if (dt.Rows.Count > 0)
{
this.Store1.DataSource = ChangeDataTable(dt);
this.Store1.DataBind();
}
else
{
Ext.Msg.Show(new MessageBox.Config
{
Title = "搜索结果",
Message = "没有找到 <font color='red'>" + newkey + "</font> 的相关内容!",
Buttons = MessageBox.Button.OK,
Icon = MessageBox.Icon.INFO
});
}
}
}