Coolite Cool Study 1 在Grid中用ComboBox 来编辑数据

最新推荐文章于 2024-07-14 18:05:06 发布
最新推荐文章于 2024-07-14 18:05:06 发布
阅读量49 收藏
点赞数
文章标签： json xhtml c#
原文链接：http://www.cnblogs.com/AndySong/archive/2009/10/31/1593683.html
版权

作为Coolite的第一个教程，我想展现给大家能够体现Coolite强大的例子（当然也比官方例子稍微复杂一点）。官方有一个关于Grid CURD 的例子：http://examples.coolite.com/Examples/GridPanel/WebService_Connections/HandlerUsing/   我在其基础上稍微修改一下， 用ComboBox作为Grid的Editor：

先show一下效果给大家坚持看下去的动力：

combobox

 

关键代码：

                              <ext:Column ColumnID="ContactName" DataIndex="ContactName" Header="Contact Name"
                                    Width="150">
                                    <Editor>
                                        <ext:ComboBox ID="ComboBox1" runat="server" StoreID="stoContactName" DisplayField="Name"
                                            ValueField="Name" TypeAhead="false" LoadingText="Searching..." Width="570" PageSize="10"
                                            Editable="true" Mode="Remote" MinListWidth="200" ItemSelector="tr.search-item"
                                            MinChars="1" MsgTarget="Side" TriggerAction="All" Grow="true">
                                            <CustomConfig>
                                                <ext:ConfigItem Name="tpl" Value="#{TplContactName}" Mode="Raw" />
                                            </CustomConfig>
                                        </ext:ComboBox>
                                    </Editor>
                                </ext:Column>

由于ComboBox作为Editor，是不能直接配置模板的，所以模板要独立写：

      <ext:XTemplate ID="TplContactName" runat="server">
            <div>
                <table id="data_table" class="t1">
                    <thead>
                        <tr>
                            <th>
                                Name
                            </th>
                            <th>
                                Desc
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tpl for=".">
                         <tr class="search-item">
                            <td>{Name}</td>
                            <td>{Desc}</td> 
                        </tr> 
                   </tpl>
                    </tbody>
                </table>
            </div>
        </ext:XTemplate>
 

再加上这个比较Cool的table样式就基本上完成了:

        body, table.t1
        {
            font-size: 12px;
        }
        table.t1
        {
            table-layout: fixed;
            empty-cells: show;
            border-collapse: collapse;
            margin: 0 auto;
        }
        td
        {
            height: 20px;
        }
        h1, h2, h3
        {
            font-size: 12px;
            margin: 0;
            padding: 0;
        }
        table.t1
        {
            border: 1px solid #cad9ea;
            color: #666;
        }
        table.t1 th
        {
            background-image: url(/extjs/resources/images/default/panel/white-top-bottom-gif/coolite.axd);
            background-repeat: repeat-x;
            height: 22px;
        }
        table.t1 td, table.t1 th
        {
            border: 1px solid #cad9ea;
            padding: 0 1em 0;
        }
        table.t1 tr.a1
        {
            background-color: #f5fafe;
        }

 

Enjoy yourself！

完整的代码：

Html

<%@ Page Language="C#" AutoEventWireup="true"%>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <mce:style type="text/css"><!--
        body, table.t1
        {
            font-size: 12px;
        }
        table.t1
        {
            table-layout: fixed;
            empty-cells: show;
            border-collapse: collapse;
            margin: 0 auto;
        }
        td
        {
            height: 20px;
        }
        h1, h2, h3
        {
            font-size: 12px;
            margin: 0;
            padding: 0;
        }
        table.t1
        {
            border: 1px solid #cad9ea;
            color: #666;
        }
        table.t1 th
        {
            background-image: url(/extjs/resources/images/default/panel/white-top-bottom-gif/coolite.axd);
            background-repeat: repeat-x;
            height: 22px;
        }
        table.t1 td, table.t1 th
        {
            border: 1px solid #cad9ea;
            padding: 0 1em 0;
        }
        table.t1 tr.a1
        {
            background-color: #f5fafe;
        }
    
--></mce:style><style type="text/css" mce_bogus="1">        body, table.t1
        {
            font-size: 12px;
        }
        table.t1
        {
            table-layout: fixed;
            empty-cells: show;
            border-collapse: collapse;
            margin: 0 auto;
        }
        td
        {
            height: 20px;
        }
        h1, h2, h3
        {
            font-size: 12px;
            margin: 0;
            padding: 0;
        }
        table.t1
        {
            border: 1px solid #cad9ea;
            color: #666;
        }
        table.t1 th
        {
            background-image: url(/extjs/resources/images/default/panel/white-top-bottom-gif/coolite.axd);
            background-repeat: repeat-x;
            height: 22px;
        }
        table.t1 td, table.t1 th
        {
            border: 1px solid #cad9ea;
            padding: 0 1em 0;
        }
        table.t1 tr.a1
        {
            background-color: #f5fafe;
        }
    </style>
</head>
<body>
    <ext:ScriptManager ID="ScriptManager1" runat="server" />
    <form id="form1" runat="server">
    <div>
        <ext:Store runat="server" ID="stoContactName">
            <Proxy>
                <ext:HttpProxy Url="CustomerHandler.ashx?action=contact" />
            </Proxy>
            <Reader>
                <ext:JsonReader Root="data" TotalProperty="totalCount">
                    <Fields>
                        <ext:RecordField Name="Name" />
                        <ext:RecordField Name="Desc" />
                    </Fields>
                </ext:JsonReader>
            </Reader>
        </ext:Store>
        <ext:XTemplate ID="TplContactName" runat="server">
            <div>
                <table id="data_table" class="t1">
                    <thead>
                        <tr>
                            <th>
                                Name
                            </th>
                            <th>
                                Desc
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tpl for=".">
                         <tr class="search-item">
                            <td>{Name}</td>
                            <td>{Desc}</td> 
                        </tr> 
                   </tpl>
                    </tbody>
                </table>
            </div>
        </ext:XTemplate>
        <ext:Store ID="dsCustomers" runat="server" RemoteSort="true" UseIdConfirmation="true">
            <Proxy>
                <ext:HttpProxy Url="CustomerHandler.ashx?action=query" />
            </Proxy>
            <UpdateProxy>
                <ext:HttpWriteProxy Url="CustomerHandler.ashx?action=save" />
            </UpdateProxy>
            <Reader>
                <ext:JsonReader ReaderID="CustomerID" Root="data" TotalProperty="totalCount">
                    <Fields>
                        <ext:RecordField Name="CustomerID" SortDir="ASC" />
                        <ext:RecordField Name="CompanyName" />
                        <ext:RecordField Name="ContactName" />
                        <ext:RecordField Name="Email" />
                        <ext:RecordField Name="Phone" />
                        <ext:RecordField Name="Fax" />
                        <ext:RecordField Name="Region" />
                        <ext:RecordField Name="TranDate" Type="Date" />
                    </Fields>
                </ext:JsonReader>
            </Reader>
            <BaseParams>
                <ext:Parameter Name="limit" Value="15" Mode="Raw" />
                <ext:Parameter Name="start" Value="0" Mode="Raw" />
                <ext:Parameter Name="dir" Value="ASC" />
                <ext:Parameter Name="sort" Value="CustomerID" />
            </BaseParams>
            <SortInfo Field="CustomerID" Direction="ASC" />
        </ext:Store>
        <ext:ViewPort ID="ViewPort1" runat="server">
            <Body>
                <ext:FitLayout ID="FitLayout1" runat="server">
                    <ext:GridPanel ID="GridPanel1" runat="server" Header="false" Border="false" StoreID="dsCustomers"
                        TrackMouseOver="true" ClicksToEdit="1" AutoExpandColumn="CompanyName" Height="500">
                        <ColumnModel ID="ColumnModel1" runat="server">
                            <Columns>
                                <ext:Column ColumnID="CustomerID" DataIndex="CustomerID" Header="ID">
                                    <Editor>
                                        <ext:TextField ID="TextField1" runat="server" MaxLength="5" AllowBlank="false" />
                                    </Editor>
                                </ext:Column>
                                <ext:Column ColumnID="TranDate" DataIndex="TranDate" Header="Tran Date">
                                    <Editor>
                                        <ext:DateField ID="DateField1" runat="server" Format="yyyy-MM-dd" MsgTarget="Side" />
                                    </Editor>
                                </ext:Column>
                                <ext:Column ColumnID="CompanyName" DataIndex="CompanyName" Header="Company Name">
                                    <Editor>
                                        <ext:TextField ID="TextField2" runat="server" AllowBlank="false" />
                                    </Editor>
                                </ext:Column>
                                <ext:Column ColumnID="ContactName" DataIndex="ContactName" Header="Contact Name"
                                    Width="150">
                                    <Editor>
                                        <ext:ComboBox ID="ComboBox1" runat="server" StoreID="stoContactName" DisplayField="Name"
                                            ValueField="Name" TypeAhead="false" LoadingText="Searching..." Width="570" PageSize="10"
                                            Editable="true" Mode="Remote" MinListWidth="200" ItemSelector="tr.search-item"
                                            MinChars="1" MsgTarget="Side" TriggerAction="All" Grow="true">
                                            <CustomConfig>
                                                <ext:ConfigItem Name="tpl" Value="#{TplContactName}" Mode="Raw" />
                                            </CustomConfig>
                                        </ext:ComboBox>
                                    </Editor>
                                </ext:Column>
                                <ext:Column ColumnID="Email" DataIndex="Email" Header="Email">
                                    <Editor>
                                        <ext:TextField ID="TextField4" runat="server" Vtype="email" />
                                    </Editor>
                                </ext:Column>
                                <ext:Column ColumnID="Phone" DataIndex="Phone" Header="Phone">
                                    <Editor>
                                        <ext:TextField ID="TextField5" runat="server" />
                                    </Editor>
                                </ext:Column>
                                <ext:Column ColumnID="Fax" DataIndex="Fax" Header="Fax">
                                    <Editor>
                                        <ext:TextField ID="TextField6" runat="server" />
                                    </Editor>
                                </ext:Column>
                                <ext:Column ColumnID="Region" DataIndex="Region" Header="Region">
                                    <Editor>
                                        <ext:TextField ID="TextField7" runat="server" />
                                    </Editor>
                                </ext:Column>
                            </Columns>
                        </ColumnModel>
                        <TopBar>
                            <ext:Toolbar ID="Toolbar1" runat="server">
                                <Items>
                                    <ext:Button ID="Button1" runat="server" Text="Save" Icon="Disk">
                                        <Listeners>
                                            <Click Handler="#{dsCustomers}.save();" />
                                        </Listeners>
                                    </ext:Button>
                                    <ext:Button ID="Button3" runat="server" Text="Add" Icon="Add">
                                        <Listeners>
                                            <Click Handler="#{GridPanel1}.insertRecord(0, {});#{GridPanel1}.getView().focusRow(0);#{GridPanel1}.startEditing(0, 0);" />
                                        </Listeners>
                                    </ext:Button>
                                    <ext:Button ID="Button2" runat="server" Text="Reject Changes" Icon="ArrowUndo">
                                        <Listeners>
                                            <Click Handler="#{dsCustomers}.rejectChanges();" />
                                        </Listeners>
                                    </ext:Button>
                                </Items>
                            </ext:Toolbar>
                        </TopBar>
                        <BottomBar>
                            <ext:PagingToolBar ID="PagingToolbar1" runat="server" StoreID="dsCustomers" PageSize="15" />
                        </BottomBar>
                        <Listeners>
                            <BeforeEdit Handler="return !(e.field=='CustomerID' && !e.record.newRecord);" />
                        </Listeners>
                        <LoadMask ShowMask="true" />
                        <SaveMask ShowMask="true" />
                    </ext:GridPanel>
                </ext:FitLayout>
            </Body>
        </ext:ViewPort>
    </div>
    </form>
</body>
</html>

CustomerHandler.ashx

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Coolite.Ext.Web;
namespace WebSPN.Controllers
{
    /// <summary>
    /// Summary description for $codebehindclassname$
    /// </summary>
    //[WebService(Namespace = "http://tempuri.org/")]
    //[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class CustomerHandler : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string json = "";
            var Request =context.Request;
           string action=  Request["action"];
           if (action == "query")
           {
               Random rand=new Random();
               int limit =int .Parse ( Request["limit"]);
               int start =int .Parse ( Request["start"]);
               IList<Customer> list = new List<Customer>();
               for (int i = start; i < start + limit; i++)
                   list.Add(new Customer
                   {
                       CustomerID = "Customer" +i,
                       Address = "Address" +i,
                       City = "City" + rand.Next(1000),
                       CompanyName = "Com" + rand.Next(1000),
                       ContactName = "Contract" + rand.Next(1000),
                       ContactTitle = "Title" + rand.Next(1000),
                       Country = "Country" + rand.Next(1000),
                       Email = rand.Next(1000) + "@live.com",
                       Fax = rand.Next(1000).ToString() + rand.Next(1000),
                       Mobile = rand.Next(1000).ToString() + rand.Next(1000),
                       Notes = "Notes" + rand.Next(1000),
                       Phone = "Phone" + rand.Next(1000),
                       Region = "Region" + rand.Next(1000),
                       TranDate =DateTime .Now .AddDays(rand.Next(30))
                   });
               json= Coolite.Ext.Web.JSON.Serialize(list);
               json = "{data:" + json + ", totalCount:" + 100 + "}";
               context.Response.Write(json);
           }
           else if (action == "save")
           {
               //saving
               StoreDataHandler dataHandler = new StoreDataHandler( Request["data"]);
               ChangeRecords<Customer> data = dataHandler.ObjectData<Customer>();
               foreach (Customer customer in data.Deleted)
               {
                   //db.Customers.Attach(customer);
                   //db.Customers.DeleteOnSubmit(customer);
               }
               foreach (Customer customer in data.Updated)
               {
                   //db.Customers.Attach(customer);
                   //db.Refresh(RefreshMode.KeepCurrentValues, customer);
               }
               foreach (Customer customer in data.Created)
               {
                   //db.Customers.InsertOnSubmit(customer);
               }
               //db.SubmitChanges(); 
                Response sr = new Response(true);
                sr.Success = true;
                sr.Write(); 
           }
           else if (action == "contact")
           {
               string query = Request["query"]??"";
               json = "[{Name:'Bruce Lee query:"+query +"',Desc:'skjfkasjdkf'},{Name:'zzz',Desc:'sffffkf'},{Name:'ssse',Desc:'zzzzzzasjdkf'},"+
                   "{Name:'Bruce Lee" + DateTime.Now  + "',Desc:'skzzjdkf'},{Name:'zzz',Desc:'sffffkf'},{Name:'ssse',Desc:'zzzzzzasjdkf'}," +
                    "{Name:'Bruce Lee',Desc:'" + DateTime.Now + "'},{Name:'zzz',Desc:'sffffkf'},{Name:'ssse',Desc:'zzzzzzasjdkf'}" +
                   "]";
               json = "{data:" + json + ", totalCount:" + 20 + "}";
               context.Response.Write(json);
           }
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
    public partial class Customer 
    { 
        public string CustomerID { get; set; }
        public string CompanyName { get; set; }
        public string ContactName { get; set; }
        public string ContactTitle { get; set; }
        public string Address { get; set; }
        public string City { get; set; }
        public string Region { get; set; }
        public string PostalCode { get; set; }
        public string Country { get; set; }
        public string Phone { get; set; }
        public string Fax { get; set; }
        public string Mobile { get; set; }
        public string Email { get; set; }
 
        public string WebPage { get; set; }
        public string Notes { get; set; } 
        public DateTime TranDate { get; set; }
    }
}

 

啊，代码太多了，下次教程要整理一下再发。


作者：Bruce（编程的艺术世界）
出处：http://coolcode.cnblogs.com
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

 

转载于:https://www.cnblogs.com/AndySong/archive/2009/10/31/1593683.html

weixin_30781631
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Coolite Asp.Net MVC 中用Extjs 实现带Check的树
weixin_30639719的博客
05-24 82
　　带Check状态的树，功能说明： 　　1）当一个节点选中时，其子节点也都选中； 　　2）当一个节点取消选中时，其子节点也都取消选中，其父接点也都需要取消选中 　　效果见图： 　　 图像上虚框是真正操作的CheckBox 废话不多说，上代码，首先看看例子的数据结构 看到这几张图，也许你有自己做的思路了吧，先看看我做的吧 我看需要查询出权限，还得查询出角色有的权限。何不一起查呢...
Coolite Cool Study 3 MVC + Coolite 的实现代码
10-29
在MVC中，与Web Forms不同的是，我们需要自定义一个`ActionResult`来返回JSON数据，因为Coolite的`JsonReader`期望特定的数据格式，即`{data: [{…}], totalCount: …}`。为此，你可以创建一个名为`AjaxStoreResult`...
Coolite Cool Study 2 同时更新多个Tab
10-29
前段时间有一个需求是这样子的——录入一个查询条件， 出来的查询结果是多张页面。不知道有没朋友遇到这个问题。 展现的效果大概是这个样子
Python应用爬虫下载QQ音乐歌曲！
Python_trys的博客
07-12 1257
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970。
vue2 实现原生 WebSocket
weixin_38797742的博客
07-11 280
原生WebSocket： new WebSocket。
fastjson 如何忽略@type类型解析
01世界的博客
07-10 321
但是在自己实现的过程中发现一个问题Java.lang.ClassCastException: class com.alibaba.fastjson.JSONObject cannot be cast to class。FASTJSON支持AutoType功能，这个功能会在序列化的JSON字符串中带上类型信息，在反序列化时，不需要传入类型，实现自动类型识别。这是因为在序列化是 FastJSON会向redis填充@Type类型，反序列化时，无法根据Type类型值转化为对应的类，导致报错。
最新JJWT 0.12.6学习
最新发布
weixin_43443913的博客
07-14 511
JJWT（Java JWT）是Java平台上相当流行的用于生成Json Web Token的库，其更新速度非常快，导致网上许多教程在如今看来都已经过时。本文将对最新的JJWT官方github页进行个人的中文解释，力求做到与官方同步。毫无疑问,jjwt也是支持自定义声明的，使用Claim()方法即可在payload中插入自己想要的键值对。
elk部署springboot
Chihirozy的博客
07-11 333
elk部署springboot。
服务器npm install报错，启动nodejs失败
m0_61160520的博客
07-14 42
npm error code EJSONPARSE npm error path /www/nodejs/package.json npm error JSON.parse Unexpected token "/" (0x2F) in JSON at position 293 while parsing near "...li-service build\",\r\n/* \"serve\": \"set ..." npm error JSON.parse Failed to parse JSON d
前端工具-json-server
zhangankang的博客
07-14 65
以项目为例，介绍前端mock数据的方式；
【HarmonyOS NEXT】鸿蒙JSON解析与生成
wu1004019946的博客
07-09 1120
本模块提供了将JSON文本转换为JSON对应对象或值，以及将对象转换为JSON字符串等功能。
浅谈后置处理器之JSON提取器
测试人，测试魂
07-12 1512
JMeter 的 JSON 提取器（JSON Extractor）是一个强大的后置处理器，它允许用户从HTTP响应、数据库查询或其他类型的响应中提取JSON数据，并将这些数据存储为变量，以便在后续的请求中重用。这对于需要动态处理基于JSON格式API测试的场景尤为有用。以下是对JSON提取器的详细说明和使用教程。
链接追踪系列-07.logstash安装json_lines插件
suanhengzi的博客
07-14 149
logstash优化：官方的建议是提高每次批处理的数量，调节传输间歇时间。当batch.size增大，es处理的事件数就会变少，写入也就越快了。
vue vite+three在线编辑模型导入导出
regretTAT的博客
07-10 488
要实现一个类似于数字孪生的场景 可以在线、新增、删除模型 、以及编辑模型的颜色、长宽高 然后还要实现 编辑完后 保存为json数据 记录模型数据 既可以导入也可以导出
gin源码分析
杆子的博客
07-11 293
对比gin新实现的路由基本上采用了httprouter的逻辑，但是和框架结合的更加完整，比如说把httprouter中router的能力提到了engine中。使用sync.pool解决频繁创建的context对象，在百万并发的场景下能大大提供访问性能和减少GC。测试结果: sonic > go_json > json_iterator > encoding。gin提供了四种可选的json序列化方式，默认情况下会使用encoding/json。通过一个简单的基准测试看看哪种json序列化效率更高。
gpt-4o看图说话-根据图片回答问题
07-09 793
将编码后的字节串解码为 UTF-8 字符串，以便于在文本环境中使用。f"你的任务是根据图片回答问题，{question}详细回答。- image_path：图片的文件路径。question = "中国的人口老龄化究竟有多严重？代码下实现如下：（直接调用openai的chat接口）- 编码后的 Base64 字符串。对图片文件进行 Base64 编码。# 对本地多张图片进行 Base64 编码。# 二进制读取模式打开图片文件，什么叫老龄化社会，有什么标志？# 发送 POST 请求。
单点登陆思路及流程
wudi6688的博客
07-14 222
单点登录（Single Sign-On，简称SSO）是一种流行的身份验证和授权机制，允许用户通过一次登录获得对多个应用程序或系统的访问权限。实现单点登录可以提高用户体验、简化用户管理和减少密码重复输入等问题。在实现单点登录时，通常需要使用一些标准协议和技术，如OAuth、OpenID Connect和SAML等。这些协议和技术提供了身份验证和授权的标准方法，使不同的应用程序和身份提供者之间可以进行安全的通信和数据交换。上述示例代码中，我们使用了Flask框架来创建一个简单的Web应用。我们定义了一个路由。
MySQL9.0的新特性
ZTBztb123456的博客
07-10 372
虽然这是 MySQL 8.3 版本的特性，但值得一提的是，它引入了支持标签的全局事务标识符（GTID），使得事务集的分组和识别更加直观。的旧客户端程序的认证请求，进一步加强了 MySQL 的安全性，并鼓励用户采用更安全的认证方法。命令，以及一些复制和服务器的相关选项，引导管理员采用更有效、更现代的操作方法。两张表，记录了系统变量的类型、作用域和允许的值，对于性能微调和维护至关重要。：新版本扩展了预处理语句的功能，支持数据定义语言（DDL）命令，如。：MySQL 8.3 版本引入了一个新的。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值