本篇教程:Coolite Toolkit中文站首发。
我从http://www.cnblogs.com/magical/archive/2009/10/27/1590701.html转载。
这个例子只是Coolite一个很简单的应用,我相信新手学习还是用的到的.也给大家带个头,写篇新手教程.
GridPanel就不作介绍了,asp.net开发人员应该比较熟悉了.官方的GridView绑定数据是通过SqlDataSource,ObjectDataSource等绑定的.
这里,GridPanel需要Store来绑定数据.首先在页面添加一个Store,如下:
这里,我使用了JsonReader,还有ArrayReader,XmlReader.JsonReader绑定的数据格式是JSON类型的,这里在后台我绑定的是DataTable,关键部分Fields下面,Name指定的名字,必须和你后台要绑定的数据里字段名称一致.ReaderID我理解是相当于指定了一个主键吧.这里只是演示,看关键部分:
不用去管,我的SQL语句怎么写的,返回DataTable就行了.和GridView一样,DataSource指定数据,然后DataBind(); OK,数据绑定完毕.一般情况下在Page_Load里调用.下面准备GridPanel吧.
GridPanel的StoreID指定了数据从哪个Store来, Columns下面的<ext:Column里的DataIndex必须和指定的Store里的Name一致.
编辑与删除,我使用了ImageCommandColumn ,指定CommandName,执行Command时需要判断的.预览使用<Renderer Fn="details" />,自定义的.这里Fn指定的是JavaScript方法
Id即每行数据的主键列,Readerer应该是在GridPanel初始化时执行的.SelectionModel指定列表选择模式,PagingToolbar分页工具栏.下面 指定了对ImageCommandColumne的Commands的单击事件监听.同样,指定了Js方法,也可以后台判断,不过我主张在前台判断
这里的参数列表按照这个的顺序就可以了,Args="grid,command,record,row,col,value" ,具体参数多少,视你的需求.command就是上面指定的CommandName,
这里就可以判断下了,是编辑还是删除操作.可以看到js里有一个News调用了一个后台AjaxMethod方法,News就相当于Coolite.AjaxMethods,如下:
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:
AutoShow=”false”,页面加载不显示,<Click Fn="SaveNews" /> ,保存还是得获取编辑窗的值,还是使用js方法:
将编辑窗的值再传到后台,这里content是编辑窗的HTML源码,传到后台Coolite已经编码了,所以在后台保存到数据库之前,得解码一下,不然下次取出来,还是得解码.还有一个Hidden是为了保存编辑信息的ID,用于更新.
编辑功能到此为止.删除操作就相对简单些了,给个提示,YES就执行删除,同样调用后台删除方法.
删除成功后,提示一下,然后重新Bind().预览查看,需要结合页面,这里就不谈了.也只是指定了一个预览路径.再来看下添加,我在Toolbar添加了一个Button,然后弹出预先准备的Window1:
<Click Fn=”addnews”/>和编辑原理一样,获取编辑器里的内容,调用后台添加方法.添加之后也注意Bind()一下.还有一个功能就是搜索了,输入关键字,我这里是一个简单搜索,在Title和Content里搜索.