[EXT.NET]GridPanel列表增删改预览

发布时间：2012-06-21 10:04:39 ，浏览量：0

这个例子只是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" />
              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" 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();" />
                      var temp = '查看';  return String.format(temp, Id); }

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

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">
  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="这里输入新闻标题.">
                          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 = "没有找到 " + newkey + " 的相关内容!",  Buttons = MessageBox.Button.OK,  Icon = MessageBox.Icon.INFO  });  }  } }

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

关注

打赏

1688896170

查看更多评论

[EXT.NET]GridPanel列表增删改预览

[ 申请 ]友情链接：