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,如下:
- <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"
- 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>
GridPanel的StoreID指定了数据从哪个Store来, Columns下面的<ext:Column里的DataIndex必须和指定的Store里的Name一致.
编辑与删除,我使用了ImageCommandColumn ,指定CommandName,执行Command时需要判断的.预览使用<Renderer Fn="details" />,自定义的.这里Fn指定的是JavaScript方法
- function details(Id)
- {
- var temp = '<a href="Details.aspx?Id={0}" mce_href="Details.aspx?Id={0}" target="_blank" mce_>查看</a>';
- 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">
- </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
- });
- }
- }
- }
全部功能及流程就是这些,肯定会有一些没有讲到或讲的不周到的地方,大家尽管提出来,共同学习,提高!
http://blog.csdn.net/llxchen/article/details/4826349
Coolite一个简单例子-GridPanel列表增删改预览相关推荐
- 使用SpringBoot一小时快速搭建一个简单后台管理(增删改查)(超详细教程)
最近也是临近期末了,各种的期末大作业,后台管理也是很多地方需要用到的,为了方便大家能快速上手,快速搭建一个简单的后台管理,我花了两天时间整理了一下 我会从0开始介绍,从数据库的设计到前端页面的引入最后 ...
- Vue.js进阶【3】纯Vue实现单页面-列表增删改查
增删改查最能代表一个技术的完备性的,下面就展示Vue的增删改查,为了界面的美观实用了bootstrap 仔细阅读下面的代码,即可领会其意思.不懂的标签和元素百度查一下一查一大堆.很快就可以理解了 运行 ...
- python学习笔记 day04 列表增删改查
写了一个python文件,想在终端中运行:windows+r(或者cmd)输入python+想要运行的py文件所在的目录 即可. pycharm的安装 参考博客: https://www.jiansh ...
- 管理后台项目-04-SPU列表-增删改SPU-获取SKU【续】
目录 1-删除spu 2-添加sku 2.1-获取skuForm页面组件的数据 2.2-收集form表单数据 2.3-保存提交数据 3-查看SKU信息和loading效果 上一篇文章管理后台项目-03 ...
- SAP MM采购定价过程的一个简单例子
SAP MM采购定价过程的一个简单例子 本文以一个简单的例子阐述了SAP MM模块中采购定价的基本原理.本例中,假定采购订单里输入的是含税采购价,然后系统自动计算出物料最终的采购价格(含税价-税额=采 ...
- mysql用创建的用户登陆并修改表格_MySQL 基础学习二:创建一个用户表,并增删改查...
MySQL 基础学习二:创建一个用户表,并 增删改查 提示:MySQL 命令建议都用大写,因为小写运行时,还是翻译成大写的. 第一步,创建一个用户表 1,打开控制台,进入数据库 C:\Users\Ad ...
- 一个简单例子:贫血模型or领域模型
转:一个简单例子:贫血模型or领域模型 贫血模型 我们首先用贫血模型来实现.所谓贫血模型就是模型对象之间存在完整的关联(可能存在多余的关联),但是对象除了get和set方外外几乎就没有其它的方法,整个 ...
- KaTex的一个简单例子
在网页中可以用KaTex显示数学公式,KaTex官网是https://katex.org 以下是KaTex的一个简单例子: 下载https://github.com/KaTeX/KaTeX/archi ...
- 开发平台之美:10分钟内实现一个销售订单功能的增删改查
IT技术发展了这么多年,早就应该抛弃那些copy&paste的工作了,毫无成就,毫无趣味,毫无好感.这直接催生了一大批快速开发平台的崛起,下面的视频讲述的就是通过一个开发平台如何在10分钟内实 ...
最新文章
- php表格 单元格,如何更改PHPWord表格单元格高度?
- js luhn算法_不会飞的鸟
- 左连接 和右链接的区别,内连接和外连接的区别
- 在LINQ to SQL中使用Translate方法以及修改查询用SQL
- Quartz 第六课 CronTrigger(官方文档翻译)
- 快速更新android sd卡,Android 动态加载sd卡的jar文件实现更新jar方法
- airpods固件更新方法_AirPods 固件迎来大更新!这两个功能终于支持了
- 动态加载so库的实现方法与问题处理
- excel服务器bom修改,勤哲Excel服务器物料清单BOM表的实现方法
- 处理IOStream异常
- 实用主义学python爬虫_麻瓜编程 实用主义学Python2018
- 自考计算机离散数学,计算机及应用自考资料2014 10 离散数学02324.doc
- 常用Dos命令及打开方式
- Webots水下机器人仿真
- 常见的打印机无法打印问题
- 某音提取真机cookie,cookie参数解密
- 用程序实现基本计算器功能
- 记录ubuntu22.04突然连不上网
- 数据增强,扩充了数据集,增加了模型的泛化能力
- html读秒倒计时,jQuery实现读秒倒计时
热门文章
- DotNetBar 教程
- 移动的宽带真的很垃圾
- Pytorch---训练与测试时爆显存(out of memory)的一个解决方案(torch.cuda.empty_cache())
- LabView学习笔记(六):while循环与for循环
- OpenCV图像处理(13)——指定区域截取和指定区域复制
- android右滑返回动画,Android仿微信右滑返回功能的实例代码
- android菜单更改,Android修改分析:删除设置中菜单
- 安卓桌面整理app_升级到 iOS 13,你还会删除 APP 和整理桌面了吗?
- python xml转字典_python xml转成dict
- 1977年发生事件_大金蛇:千年银蛇,万年金蛇:1977年【蛇蛇人】11月上旬家里有“爆炸性”事件发生!...