Coolite簡単な例-GridPanelリストの削除プレビューとオンラインエディタ
55601 ワード
この例はCooliteの簡単な応用にすぎず、初心者が勉強していると信じています.皆さんにも頭を持って、初心者のチュートリアルを書きます.
GridPanelは紹介しないNet開発者はよく知っているはずです.公式のGridViewバインドデータはSqlDataSource,ObjectDataSource等によりバインドする.
ここでGridPanelは、データをバインドするためにStoreを必要とする.まず、次のようにページにStoreを追加します.
ここでは、JsonReader、そしてArrayReader、XmlReaderを使いました.JsonReaderバインドのデータフォーマットはJSONタイプで、ここでバックグラウンドで私がバインドしているのはDataTableで、肝心な部分Fieldsの下で、Nameが指定した名前は、バックグラウンドでバインドするデータのフィールド名と一致しなければなりません.Reader IDはプライマリ・キーを指定したことに相当すると理解しています.ここでは、重要な部分を見て説明します.
気にしないで、私のSQL文はどのように書いて、DataTableに戻ればいいです.GridViewと同様に、DataSourceはデータを指定し、DataBind()OK、データバインド完了.一般的にPage_ロードで呼び出す次はGridPanelを用意しましょう.編集と削除は、ImageCommandColumnを使用し、CommandNameを指定し、Commandを実行する際に判断する必要があります.プレビューはを使用してカスタマイズする.ここでFnはJavaScriptメソッドを指定します
下
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に戻る.ここは人を振り回して、他のフィールドは、バックグラウンドに設置する必要があります.EditSetNews.ほほほもっと良い解決策があることを望みます.News.BindNewsCate();
これは私が編集をクリックする時、Winodw 2 showが出る前に、ユーザーがここで別のページに新しい分類を追加した可能性が高いので、ニュースの分類を再バインドしたいと思っています.ここでは事前にページにwindowを置きました.
AutoShow="false",ページロードは表示されず,,保存するか編集ウィンドウの値を取得するかjsメソッドを使用するか:
編集ウィンドウの値をバックグラウンドに転送します.ここでcontentは編集ウィンドウのHTMLソースコードで、バックグラウンドCooliteに転送するのはすでに符号化されているので、バックグラウンドがデータベースに保存される前に、復号しなければなりません.そうしないと、今度取り出して、復号しなければなりません.もう1つのHiddenは編集情報のIDを保存するために更新する.
編集機能はここまでです.削除操作は比較的簡単で、ヒントを与えて、YESは削除を実行して、同様にバックグラウンドの削除方法を呼び出します.
削除に成功したら、ヒントを与えて、Bind()を再起動します.プレビューを表示するには、ページを結合する必要があります.ここでは説明しません.プレビューパスを指定するだけです.追加を見て、ToolbarにButtonを追加し、事前に準備したWindow 1をポップアップしました.
編集原理と同様にエディタの内容を取得し、バックグラウンドの追加方法を呼び出す.追加後もBind()にご注意ください.もう一つの機能は検索です.キーワードを入力します.私のところは簡単な検索です.TitleとContentで検索します.
GridPanelは紹介しない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が指定した名前は、バックグラウンドでバインドするデータのフィールド名と一致しなければなりません.Reader IDはプライマリ・キーを指定したことに相当すると理解しています.ここでは、重要な部分を見て説明します.
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_ロードで呼び出す次は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>function details(Id) {
var temp = '<a href="Details.aspx?Id={0}" target="_blank" style="color:blue"> </a>';
return String.format(temp, Id);
}下
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に戻る.ここは人を振り回して、他のフィールドは、バックグラウンドに設置する必要があります.EditSetNews.ほほほもっと良い解決策があることを望みます.News.BindNewsCate();
これは私が編集をクリックする時、Winodw 2 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",ページロードは表示されず,
//
var SaveNews = function() {
var Editor = FCKeditorAPI.GetInstance('FCKeditor2');
var content = Editor.GetXHTML(true); //
News.EditSaveNews(content);
}編集ウィンドウの値をバックグラウンドに転送します.ここでcontentは編集ウィンドウのHTMLソースコードで、バックグラウンドCooliteに転送するのはすでに符号化されているので、バックグラウンドがデータベースに保存される前に、復号しなければなりません.そうしないと、今度取り出して、復号しなければなりません.もう1つの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を追加し、事前に準備したWindow 1をポップアップしました.
<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>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
});
}
}
}