zoukankan      html  css  js  c++  java

  • Coolite一个简单例子GridPanel列表增删改预览

    本篇教程:Coolite Toolkit中文站首发。

    我从http://www.cnblogs.com/magical/archive/2009/10/27/1590701.html转载。

    这个例子只是Coolite一个很简单的应用,我相信新手学习还是用的到的.也给大家带个头,写篇新手教程.

    GridPanel就不作介绍了,asp.net开发人员应该比较熟悉了.官方的GridView绑定数据是通过SqlDataSource,ObjectDataSource等绑定的.

    这里,GridPanel需要Store来绑定数据.首先在页面添加一个Store,如下:

    [xhtml] view plaincopy
    1. <ext:Store ID="Store1" runat="server" OnRefreshData="RefreshData">  
    2.            <Reader>  
    3.                <ext:JsonReader ReaderID="Id">  
    4.                    <Fields>  
    5.                        <ext:RecordField Name="Id" />  
    6.                        <ext:RecordField Name="Title" />  
    7.                        <ext:RecordField Name="Content" />  
    8.                        <ext:RecordField Name="NewsTime" />  
    9.                        <ext:RecordField Name="Category" />  
    10.                    </Fields>  
    11.                </ext:JsonReader>  
    12.            </Reader>  
    13.        </ext:Store>  

    这里,我使用了JsonReader,还有ArrayReader,XmlReader.JsonReader绑定的数据格式是JSON类型的,这里在后台我绑定的是DataTable,关键部分Fields下面,Name指定的名字,必须和你后台要绑定的数据里字段名称一致.ReaderID我理解是相当于指定了一个主键吧.这里只是演示,看关键部分:

    [c-sharp] view plaincopy
    1. protected void Bind()  
    2.        {  
    3.            string sql = "SELECT NewsInfo.Id, NewsInfo.Title, NewsInfo.Content,NewsInfo.NewsTime, "   
    4.                + "CategoryInfo.Category FROM NewsInfo, CategoryInfo WHERE NewsInfo.Category = CategoryInfo.Id order by NewsInfo.Id";   
    5.            DataTable dt = DbHelper.GetDataTable(sql); this.Store1.DataSource = dt; this.Store1.DataBind();  
    6.        }  

    不用去管,我的SQL语句怎么写的,返回DataTable就行了.和GridView一样,DataSource指定数据,然后DataBind(); OK,数据绑定完毕.一般情况下在Page_Load里调用.下面准备GridPanel吧.

    [xhtml] view plaincopy
    1. <ext:GridPanel ID="GridPanel1" runat="server" Title="新闻列表" Width="840" AutoHeight="true"  
    2.     Frame="false" StoreID="Store1" Icon="Information">  
    3.     <TopBar>  
    4.         <ext:Toolbar ID="Toolbar1" runat="server">  
    5.             <Items>  
    6.                 <ext:Button ID="Add" runat="server" Text="添加新闻" Icon="TableAdd">  
    7.                     <Listeners>  
    8.                         <Click Handler="News.BindNewsCate();#{Window1}.show();" />  
    9.                     </Listeners>  
    10.                 </ext:Button>  
    11.                 <ext:TextField ID="txtNewKey" runat="server" AllowBlank="false" EmptyText="请输入搜索关键字!">  
    12.                 </ext:TextField>  
    13.                 <ext:Button ID="btnSearch" runat="server" Text="查 找" Icon="Find">  
    14.                     <AjaxEvents>  
    15.                         <Click OnEvent="SearchNews">  
    16.                             <EventMask ShowMask="true" Msg="正在搜索..." />  
    17.                         </Click>  
    18.                     </AjaxEvents>  
    19.                 </ext:Button>  
    20.             </Items>  
    21.         </ext:Toolbar>  
    22.     </TopBar>  
    23.     <ColumnModel runat="server" ID="ct102">  
    24.         <Columns>  
    25.             <ext:Column ColumnID="id" DataIndex="Id" Width="60" Header="序号" Hidden="false">  
    26.                 <PrepareCommand Handler="" Args="grid,command,record,row,col,value" FormatHandler="False">  
    27.                 </PrepareCommand>  
    28.             </ext:Column>  
    29.             <ext:Column ColumnID="title" DataIndex="Title" Width="150" Header="新闻标题">  
    30.                 <PrepareCommand Handler="" Args="grid,command,record,row,col,value" FormatHandler="False">  
    31.                 </PrepareCommand>  
    32.             </ext:Column>  
    33.             <ext:Column ColumnID="content" DataIndex="Content" Width="280" Header="新闻内容">  
    34.                 <PrepareCommand Handler="" Args="grid,command,record,row,col,value" FormatHandler="False">  
    35.                 </PrepareCommand>  
    36.             </ext:Column>  
    37.             <ext:Column ColumnID="category" DataIndex="Category" Width="100" Header="新闻分类">  
    38.                 <PrepareCommand Handler="" Args="grid,command,record,row,col,value" FormatHandler="False">  
    39.                 </PrepareCommand>  
    40.             </ext:Column>  
    41.             <ext:Column ColumnID="newsTime" DataIndex="NewsTime" Width="100" Header="发布时间">  
    42.                 <PrepareCommand Handler="" Args="grid,command,record,row,col,value" FormatHandler="False">  
    43.                 </PrepareCommand>  
    44.             </ext:Column>  
    45.             <ext:ImageCommandColumn Width="100" Header="操作" ColumnID="Comman" Resizable="true">  
    46.                 <Commands>  
    47.                     <ext:ImageCommand CommandName="Delete" Icon="TableDelete" Text="删除">  
    48.                         <ToolTip Text="Delete" />  
    49.                     </ext:ImageCommand>  
    50.                     <ext:ImageCommand CommandName="Edit" Icon="TableEdit" Text="编辑">  
    51.                         <ToolTip Text="Edit" />  
    52.                     </ext:ImageCommand>  
    53.                 </Commands>  
    54.                 <PrepareGroupCommand Handler="" Args="grid,command,groupId,group" FormatHandler="False">  
    55.                 </PrepareGroupCommand>  
    56.                 <PrepareCommand Fn="prepareCommand" />  
    57.             </ext:ImageCommandColumn>  
    58.             <ext:Column ColumnID="details" DataIndex="Id" Width="50" Header="预览" Sortable="false"  
    59.                 MenuDisabled="true">  
    60.                 <PrepareCommand Handler="" Args="grid,command,record,row,col,value" FormatHandler="False">  
    61.                 </PrepareCommand>  
    62.                 <Renderer Fn="details" />  
    63.             </ext:Column>  
    64.         </Columns>  
    65.     </ColumnModel>  
    66.     <SelectionModel>  
    67.         <ext:RowSelectionModel runat="server" ID="rowselect">  
    68.         </ext:RowSelectionModel>  
    69.     </SelectionModel>  
    70.     <LoadMask ShowMask="true" Msg="正在加载..." />  
    71.     <BottomBar>  
    72.         <ext:PagingToolbar runat="server" PageSize="15" StoreID="Store1" ID="paging">  
    73.         </ext:PagingToolbar>  
    74.     </BottomBar>  
    75.     <Listeners>  
    76.         <Command Fn="gridCommand" />  
    77.     </Listeners>  
    78.     <%--<AjaxEvents>  
    79.         <Command OnEvent="OnCommand_Click">  
    80.             <ExtraParams>  
    81.                 <ext:Parameter Name="type" Value="command" Mode="Raw">  
    82.                 </ext:Parameter>  
    83.                 <ext:Parameter Name="id" Value="record.data.Id" Mode="Raw">  
    84.                 </ext:Parameter>  
    85.             </ExtraParams>  
    86.         </Command>  
    87.     </AjaxEvents>  
    88.     这里注释掉的部分就是,可以后台判断编辑删除的,Parameter是传向后台的参数--%>  
    89. </ext:GridPanel>  

    GridPanel的StoreID指定了数据从哪个Store来, Columns下面的<ext:Column里的DataIndex必须和指定的Store里的Name一致.

    编辑与删除,我使用了ImageCommandColumn ,指定CommandName,执行Command时需要判断的.预览使用<Renderer Fn="details" />,自定义的.这里Fn指定的是JavaScript方法

    [javascript] view plaincopy
    1. function details(Id)   
    2. {      
    3.     var temp = '<a href="Details.aspx?Id={0}" mce_href="Details.aspx?Id={0}" target="_blank"  mce_>查看</a>';      
    4.     return String.format(temp, Id);  
    5. }  

    Id即每行数据的主键列,Readerer应该是在GridPanel初始化时执行的.SelectionModel指定列表选择模式,PagingToolbar分页工具栏.下面 指定了对ImageCommandColumne的Commands的单击事件监听.同样,指定了Js方法,也可以后台判断,不过我主张在前台判断 

    [javascript] view plaincopy
    1. var gridCommand = function(command, record, rowIndex) {  
    2.     if (command == "Edit") {  
    3.         var id = record.data.Id;          
    4.         //通过id从后台获取content内容,并添加到fck里.          
    5.         News.GetContentById(id, {  
    6.             success: function(result) {  
    7.                 var Editor = FCKeditorAPI.GetInstance('FCKeditor2');  
    8.                 Editor.SetHTML(result);  
    9.             }  
    10.         });  
    11.         var title = record.data.Title;  //新闻标题          
    12.         var category = record.data.Category;    //新闻分类          
    13.         //设置编辑窗的值          
    14.         News.EditSetNews(id, title, category,  
    15.         {  
    16.             success: function(result) {  
    17.                 News.BindNewsCate();  
    18.                 Window2.show();  
    19.             }  
    20.         });  
    21.     }      
    22.     if (command == "Delete") {  
    23.         Ext.Msg.confirm('提示', '是否确定删除该条新闻?', function(btn) {  
    24.                 if (btn == 'yes') {  
    25.                     News.DeleteNews(record.data.Id);  
    26.                 }  
    27.         });  
    28.     }  
    29. };  

    这里的参数列表按照这个的顺序就可以了,Args="grid,command,record,row,col,value" ,具体参数多少,视你的需求.command就是上面指定的CommandName,

    这里就可以判断下了,是编辑还是删除操作.可以看到js里有一个News调用了一个后台AjaxMethod方法,News就相当于Coolite.AjaxMethods,如下:

    [xhtml] view plaincopy
    1. <ext:ScriptManager ID="ScriptManager1" runat="server" AjaxMethodNamespace="News">  
    2.         </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:

    [xhtml] view plaincopy
    1. <ext:Window ID="Window2" runat="server" AutoHeight="true" Width="800" Maximizable="true"  
    2.     Modal="true" Title="编辑新闻" Icon="TableEdit" AutoShow="false">  
    3.     <Body>  
    4.         <ext:FormPanel ID="FormPanel2" runat="server" BodyStyle="padding:5px;" ButtonAlign="Right"  
    5.             Frame="true" AutoHeight="true" AutoWidth="true" Icon="NewspaperAdd">  
    6.             <Body>  
    7.                 <ext:FormLayout ID="FormLayout2" runat="server">  
    8.                     <ext:Anchor Horizontal="100%">  
    9.                         <ext:TextField ID="TextField2" runat="server" FieldLabel="新闻标题" AllowBlank="false"  
    10.                             BlankText="请输入新闻标题!">  
    11.                         </ext:TextField>  
    12.                     </ext:Anchor>  
    13.                     <ext:Anchor Horizontal="100%">  
    14.                         <ext:ComboBox ID="ComboBox2" runat="server" StoreID="Store2" DisplayField="Category"  
    15.                             AllowBlank="false" ValueField="Id" EmptyText="选择一项..." FieldLabel="新闻分类">  
    16.                         </ext:ComboBox>  
    17.                     </ext:Anchor>  
    18.                     <ext:Anchor Horizontal="%100">  
    19.                         <ext:Panel runat="server" ID="_editArea2" AutoWidth="true" Height="500">  
    20.                             <Body>  
    21.                                 <fckeditorv2:fckeditor id="FCKeditor2" runat="server">                                </fckeditorv2:fckeditor>  
    22.                             </Body>  
    23.                         </ext:Panel>  
    24.                     </ext:Anchor>  
    25.                     <ext:Anchor Horizontal="%100">  
    26.                         <ext:Hidden ID="Hidden1" runat="server">  
    27.                         </ext:Hidden>  
    28.                     </ext:Anchor>  
    29.                 </ext:FormLayout>  
    30.             </Body>  
    31.             <Buttons>  
    32.                 <ext:Button ID="Button3" runat="server" Icon="Disk" Text="保存">  
    33.                     <Listeners>  
    34.                         <Click Fn="SaveNews" />  
    35.                     </Listeners>  
    36.                 </ext:Button>  
    37.                 <ext:Button ID="Button4" runat="server" Icon="Cancel" Text="取消">  
    38.                     <Listeners>  
    39.                         <Click Handler="Window2.hide();" />  
    40.                     </Listeners>  
    41.                 </ext:Button>  
    42.             </Buttons>  
    43.         </ext:FormPanel>  
    44.     </Body>  
    45. </ext:Window>  

    AutoShow=”false”,页面加载不显示,<Click Fn="SaveNews" /> ,保存还是得获取编辑窗的值,还是使用js方法:

    [javascript] view plaincopy
    1. //保存编辑新闻  
    2.     var SaveNews = function() {  
    3.         var Editor = FCKeditorAPI.GetInstance('FCKeditor2');  
    4.             var content = Editor.GetXHTML(true); //编辑器里的内容  
    5.             News.EditSaveNews(content);  
    6.     }  

    将编辑窗的值再传到后台,这里content是编辑窗的HTML源码,传到后台Coolite已经编码了,所以在后台保存到数据库之前,得解码一下,不然下次取出来,还是得解码.还有一个Hidden是为了保存编辑信息的ID,用于更新.

    [c-sharp] view plaincopy
    1. string newsContent = HttpUtility.HtmlDecode(content);  

    编辑功能到此为止.删除操作就相对简单些了,给个提示,YES就执行删除,同样调用后台删除方法.

    [c-sharp] view plaincopy
    1. [AjaxMethod()]  
    2. public void DeleteNews(int Id)  
    3. {  
    4.     string sql = "delete from NewsInfo where Id = " + Id + "";  
    5.     int result = DbHelper.ExecuteSql(sql);  
    6.     if (result > 0)  
    7.     {  
    8.         //删除成功          
    9.         Ext.Msg.Show(new MessageBox.Config  
    10.         {  
    11.             Title = "消息",  
    12.             Message = "已成功删除指定新闻条目!",  
    13.             Icon = MessageBox.Icon.INFO,  
    14.             Buttons = MessageBox.Button.OK  
    15.         });  
    16.         this.Bind();  
    17.         //重新给Store指定数据      
    18.     }  
    19.     else  
    20.     {  
    21.         //删除失败          
    22.         Ext.Msg.Show(new MessageBox.Config  
    23.         {  
    24.             Title = "消息",  
    25.             Message = "删除新闻失败,请重新操作!",  
    26.             Icon = MessageBox.Icon.ERROR,  
    27.             Buttons = MessageBox.Button.OK  
    28.         });  
    29.     }  
    30. }  

    删除成功后,提示一下,然后重新Bind().预览查看,需要结合页面,这里就不谈了.也只是指定了一个预览路径.再来看下添加,我在Toolbar添加了一个Button,然后弹出预先准备的Window1:

    [xhtml] view plaincopy
    1. <ext:Window ID="Window1" runat="server" AutoHeight="true" Width="800" Maximizable="true"  
    2.     Modal="true" Title="添加新闻" Icon="TableAdd" AnimateTarget="Add">  
    3.     <Body>  
    4.         <ext:FormPanel ID="FormPanel1" runat="server" BodyStyle="padding:5px;" ButtonAlign="Right"  
    5.             Frame="true" AutoHeight="true" AutoWidth="true" Icon="NewspaperAdd">  
    6.             <Body>  
    7.                 <ext:FormLayout ID="FormLayout1" runat="server">  
    8.                     <ext:Anchor Horizontal="100%">  
    9.                         <ext:TextField ID="TextField1" runat="server" FieldLabel="新闻标题" AllowBlank="false"  
    10.                             BlankText="请输入新闻标题!" EmptyText="这里输入新闻标题.">  
    11.                         </ext:TextField>  
    12.                     </ext:Anchor>  
    13.                     <ext:Anchor Horizontal="100%">  
    14.                         <ext:ComboBox ID="ComboBox1" runat="server" StoreID="Store2" DisplayField="Category"  
    15.                             AllowBlank="false" ValueField="Id" EmptyText="选择一项..." FieldLabel="新闻分类">  
    16.                         </ext:ComboBox>  
    17.                     </ext:Anchor>  
    18.                     <ext:Anchor Horizontal="%100">  
    19.                         <ext:Panel runat="server" ID="_editArea" AutoWidth="true" Height="500">  
    20.                             <Body>  
    21.                                 <fckeditorv2:fckeditor id="FCKeditor1" runat="server" value="">                                </fckeditorv2:fckeditor>  
    22.                             </Body>  
    23.                         </ext:Panel>  
    24.                     </ext:Anchor>  
    25.                 </ext:FormLayout>  
    26.             </Body>  
    27.             <Buttons>  
    28.                 <ext:Button ID="Button1" runat="server" Icon="Disk" Text="发布">  
    29.                     <Listeners>  
    30.                         <Click Fn="addnews" />  
    31.                     </Listeners>  
    32.                 </ext:Button>  
    33.                 <ext:Button ID="Button2" runat="server" Icon="Cancel" Text="取消">  
    34.                     <Listeners>  
    35.                         <Click Handler="Window1.hide();" />  
    36.                     </Listeners>  
    37.                 </ext:Button>  
    38.             </Buttons>  
    39.         </ext:FormPanel>  
    40.     </Body>  
    41. </ext:Window>  

    <Click Fn=”addnews”/>和编辑原理一样,获取编辑器里的内容,调用后台添加方法.添加之后也注意Bind()一下.还有一个功能就是搜索了,输入关键字,我这里是一个简单搜索,在Title和Content里搜索.

    [c-sharp] view plaincopy
    1. protected void SearchNews(object sender, AjaxEventArgs e)  
    2. {  
    3.     string newkey = this.txtNewKey.Text; if (newkey.Equals(""))  
    4.     {  
    5.         Ext.Msg.Show(new MessageBox.Config  
    6.         {  
    7.             Title = "提示",  
    8.             Message = "请输入您要搜索的关键字!",  
    9.             Buttons = MessageBox.Button.OK,  
    10.             Icon = MessageBox.Icon.INFO  
    11.         });  
    12.     }  
    13.     else  
    14.     {  
    15.         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";   
    16.         DataTable dt = DbHelper.GetDataTable(sql, CommandType.Text, new OleDbParameter[] { });  
    17.         if (dt.Rows.Count > 0)  
    18.         {  
    19.             this.Store1.DataSource = ChangeDataTable(dt); this.Store1.DataBind();  
    20.         }  
    21.         else  
    22.         {  
    23.             Ext.Msg.Show(new MessageBox.Config  
    24.             {  
    25.                 Title = "搜索结果",  
    26.                 Message = "没有找到 <font color='red'>" + newkey + "</font> 的相关内容!",  
    27.                 Buttons = MessageBox.Button.OK,  
    28.                 Icon = MessageBox.Icon.INFO  
    29.             });  
    30.         }  
    31.     }  
    32. }  

      

    全部功能及流程就是这些,肯定会有一些没有讲到或讲的不周到的地方,大家尽管提出来,共同学习,提高!

    http://blog.csdn.net/llxchen/article/details/4826349
  • 相关阅读:
    nc之二：nc命令详解
    memcache redundancy机制分析及思考
    memcache和redis区别
    java操作mongodb
    Memcache缓存与Mongodb数据库的优势和应用
    memcache 存储单个KEY，数据量过大的时候性能慢！以及简单的memcache不适合用到的场景
    pkill详解
    修改linux用户密码
    Mysql函数INSTR、LOCATE、POSITION VS LIKE
    Servlet3.0之九：web模块化
  • 原文地址：https://www.cnblogs.com/Areas/p/2421832.html
Copyright © 2011-2022 走看看