ExtJS学习(四)EditorGrid可编辑表格

最新推荐文章于 2019-01-08 15:15:38 发布
最新推荐文章于 2019-01-08 15:15:38 发布
阅读量937 收藏
点赞数

操作表格有一种需求，要操作表格需要动态的添加内容，删除内容以及双击的时候进入编辑状态。这个时候怎么办呢，看具体的实现吧。 
双击点击的时候可以单元格的操作。 
代码：

<code class="hljs actionscript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><!DOCTYPE html>
<html>
<head>
<meta charset=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"UTF-8"</span>>
<meta http-equiv=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Content-Type"</span> content=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"text/html; charset=UTF-8"</span>>  
<title>Hello Extjs4<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">.2</span></title>  
<link href=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"../ExtJS4.2/resources/css/ext-all.css"</span> rel=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"stylesheet"</span>>  
<script src=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"../ExtJS4.2/ext-all.js"</span>></script> 
<script src=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"d1.js"</span>></script> 
<script  src=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"../ExtJS4.2/locale/ext-lang-zh_CN.js"</span>></script>
</head>
<body>
<h1>ExtJS4<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">.2</span>学习</h1>  
<hr />  
作者：springok  
<h2>ExtJS grid表格</h2>  
<div id=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"springokgrid"</span>></div>
<div id=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"springok1"</span>></div>
</body>
</html>
Ext.onReady(<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>  
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//定义列  </span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> columns = [  
        {header:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'编号'</span>,dataIndex:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'id'</span>,width:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">50</span>,  
            editor:{  
                allowBlank:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>  
            }}, <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//sortable:true 可设置是否为该列进行排序  </span>
        {header:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'名称'</span>,dataIndex:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'name'</span>,width:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">80</span>},  
        {header:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'描述'</span>,dataIndex:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'descn'</span>,width:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">112</span>}  
      ];  
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//定义数据  </span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> data =[  
        [<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'1'</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'小王'</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'描述01'</span>],  
        [<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'2'</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'李四'</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'描述02'</span>],  
        [<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'3'</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'张三'</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'描述03'</span>],  
        [<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'4'</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'束洋洋'</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'思考者日记网'</span>],  
        [<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'5'</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'高飞'</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'描述05'</span>]  
    ];  
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//转换原始数据为EXT可以显示的数据  </span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> store = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> Ext.data.ArrayStore({  
        data:data,  
        fields:[  
           {name:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'id'</span>}, <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//mapping:0 这样的可以指定列显示的位置，0代表第1列，可以随意设置列显示的位置  </span>
           {name:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'name'</span>},  
           {name:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'descn'</span>}  
        ]  
    });  
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//加载数据  </span>
    store.load();  

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//创建表格  </span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> grid = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> Ext.grid.GridPanel({  
        renderTo:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'springokgrid'</span>, <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//渲染位置  </span>
        width:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">550</span>,  
        autoHeight:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>,  
        store:store,  
        columns:columns, <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//显示列  </span>
        stripeRows:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>, <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//斑马线效果  </span>
        selType: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'cellmodel'</span>,  
        bbar:<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> Ext.PagingToolbar({  
            pageSize:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>, <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//每页显示几条数据  </span>
            store:store,   
            displayInfo:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>, <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//是否显示数据信息  </span>
            displayMsg:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'显示第 {0} 条到 {1} 条记录，一共  {2} 条'</span>, <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//只要当displayInfo为true时才有效，用来显示有数据时的提示信息，{0},{1},{2}会自动被替换成对应的数据  </span>
            emptyMsg: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"没有记录"</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//没有数据时显示信息  </span>
        }) ,
        plugins:[  
                 Ext.create(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'Ext.grid.plugin.CellEditing'</span>,{  
                     clicksToEdit:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//设置单击单元格编辑  </span>
                 })  
        ],  
        tbar:[<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'-'</span>,{  
            text:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'添加一行'</span>,  
            handler:<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>  
                <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> p ={  
                        id:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">''</span>,  
                        name:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">''</span>,  
                        descn:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">''</span>  
                        };  
                    store.insert(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>,p);  
                }  
            },<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'-'</span>,{  
                text:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'删除一行'</span>,  
                handler:<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>  
                    Ext.Msg.confirm(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'系统提示'</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'确定要删除？'</span>,<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(btn)</span>{</span>  
                        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span>(btn==<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'yes'</span>){  
                            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> sm = grid.getSelectionModel();  
                            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> record = sm.getSelection()[<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>];  
                            store.remove(record);  
                        }  
                    });  
                }  
        },<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'-'</span>,{  
            text:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'保存'</span>,  
            handler:<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>  
                <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> m = store.getModifiedRecords().slice(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>);  
                <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> jsonArray = [];  
                Ext.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">each</span>(m,<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(item)</span>{</span>  
                    jsonArray.push(item.data);  
                });  
                Ext.Ajax.request({  
                    method:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'POST'</span>,  
                    url:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'/ExtJs4.2Pro/EditGridServlet'</span>,  
                    success:<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(response)</span>{</span>  
                        Ext.Msg.alert(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'系统提示'</span>,response.responseText,<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>  
                            store.load();  
                        });  
                    },  
                    failure:<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>  
                        Ext.Msg.alert(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"错误"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"与后台联系的时候出了问题。"</span>);  
                    },  
                    params:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'data='</span>+encodeURIComponent(Ext.encode(jsonArray))  
                });  
            }  
        }]  
    });  
});  </code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box; padding: 0px 5px;">58</li><li style="box-sizing: border-box; padding: 0px 5px;">59</li><li style="box-sizing: border-box; padding: 0px 5px;">60</li><li style="box-sizing: border-box; padding: 0px 5px;">61</li><li style="box-sizing: border-box; padding: 0px 5px;">62</li><li style="box-sizing: border-box; padding: 0px 5px;">63</li><li style="box-sizing: border-box; padding: 0px 5px;">64</li><li style="box-sizing: border-box; padding: 0px 5px;">65</li><li style="box-sizing: border-box; padding: 0px 5px;">66</li><li style="box-sizing: border-box; padding: 0px 5px;">67</li><li style="box-sizing: border-box; padding: 0px 5px;">68</li><li style="box-sizing: border-box; padding: 0px 5px;">69</li><li style="box-sizing: border-box; padding: 0px 5px;">70</li><li style="box-sizing: border-box; padding: 0px 5px;">71</li><li style="box-sizing: border-box; padding: 0px 5px;">72</li><li style="box-sizing: border-box; padding: 0px 5px;">73</li><li style="box-sizing: border-box; padding: 0px 5px;">74</li><li style="box-sizing: border-box; padding: 0px 5px;">75</li><li style="box-sizing: border-box; padding: 0px 5px;">76</li><li style="box-sizing: border-box; padding: 0px 5px;">77</li><li style="box-sizing: border-box; padding: 0px 5px;">78</li><li style="box-sizing: border-box; padding: 0px 5px;">79</li><li style="box-sizing: border-box; padding: 0px 5px;">80</li><li style="box-sizing: border-box; padding: 0px 5px;">81</li><li style="box-sizing: border-box; padding: 0px 5px;">82</li><li style="box-sizing: border-box; padding: 0px 5px;">83</li><li style="box-sizing: border-box; padding: 0px 5px;">84</li><li style="box-sizing: border-box; padding: 0px 5px;">85</li><li style="box-sizing: border-box; padding: 0px 5px;">86</li><li style="box-sizing: border-box; padding: 0px 5px;">87</li><li style="box-sizing: border-box; padding: 0px 5px;">88</li><li style="box-sizing: border-box; padding: 0px 5px;">89</li><li style="box-sizing: border-box; padding: 0px 5px;">90</li><li style="box-sizing: border-box; padding: 0px 5px;">91</li><li style="box-sizing: border-box; padding: 0px 5px;">92</li><li style="box-sizing: border-box; padding: 0px 5px;">93</li><li style="box-sizing: border-box; padding: 0px 5px;">94</li><li style="box-sizing: border-box; padding: 0px 5px;">95</li><li style="box-sizing: border-box; padding: 0px 5px;">96</li><li style="box-sizing: border-box; padding: 0px 5px;">97</li><li style="box-sizing: border-box; padding: 0px 5px;">98</li><li style="box-sizing: border-box; padding: 0px 5px;">99</li><li style="box-sizing: border-box; padding: 0px 5px;">100</li><li style="box-sizing: border-box; padding: 0px 5px;">101</li><li style="box-sizing: border-box; padding: 0px 5px;">102</li><li style="box-sizing: border-box; padding: 0px 5px;">103</li><li style="box-sizing: border-box; padding: 0px 5px;">104</li><li style="box-sizing: border-box; padding: 0px 5px;">105</li><li style="box-sizing: border-box; padding: 0px 5px;">106</li><li style="box-sizing: border-box; padding: 0px 5px;">107</li><li style="box-sizing: border-box; padding: 0px 5px;">108</li><li style="box-sizing: border-box; padding: 0px 5px;">109</li><li style="box-sizing: border-box; padding: 0px 5px;">110</li><li style="box-sizing: border-box; padding: 0px 5px;">111</li><li style="box-sizing: border-box; padding: 0px 5px;">112</li><li style="box-sizing: border-box; padding: 0px 5px;">113</li><li style="box-sizing: border-box; padding: 0px 5px;">114</li><li style="box-sizing: border-box; padding: 0px 5px;">115</li><li style="box-sizing: border-box; padding: 0px 5px;">116</li><li style="box-sizing: border-box; padding: 0px 5px;">117</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box; padding: 0px 5px;">58</li><li style="box-sizing: border-box; padding: 0px 5px;">59</li><li style="box-sizing: border-box; padding: 0px 5px;">60</li><li style="box-sizing: border-box; padding: 0px 5px;">61</li><li style="box-sizing: border-box; padding: 0px 5px;">62</li><li style="box-sizing: border-box; padding: 0px 5px;">63</li><li style="box-sizing: border-box; padding: 0px 5px;">64</li><li style="box-sizing: border-box; padding: 0px 5px;">65</li><li style="box-sizing: border-box; padding: 0px 5px;">66</li><li style="box-sizing: border-box; padding: 0px 5px;">67</li><li style="box-sizing: border-box; padding: 0px 5px;">68</li><li style="box-sizing: border-box; padding: 0px 5px;">69</li><li style="box-sizing: border-box; padding: 0px 5px;">70</li><li style="box-sizing: border-box; padding: 0px 5px;">71</li><li style="box-sizing: border-box; padding: 0px 5px;">72</li><li style="box-sizing: border-box; padding: 0px 5px;">73</li><li style="box-sizing: border-box; padding: 0px 5px;">74</li><li style="box-sizing: border-box; padding: 0px 5px;">75</li><li style="box-sizing: border-box; padding: 0px 5px;">76</li><li style="box-sizing: border-box; padding: 0px 5px;">77</li><li style="box-sizing: border-box; padding: 0px 5px;">78</li><li style="box-sizing: border-box; padding: 0px 5px;">79</li><li style="box-sizing: border-box; padding: 0px 5px;">80</li><li style="box-sizing: border-box; padding: 0px 5px;">81</li><li style="box-sizing: border-box; padding: 0px 5px;">82</li><li style="box-sizing: border-box; padding: 0px 5px;">83</li><li style="box-sizing: border-box; padding: 0px 5px;">84</li><li style="box-sizing: border-box; padding: 0px 5px;">85</li><li style="box-sizing: border-box; padding: 0px 5px;">86</li><li style="box-sizing: border-box; padding: 0px 5px;">87</li><li style="box-sizing: border-box; padding: 0px 5px;">88</li><li style="box-sizing: border-box; padding: 0px 5px;">89</li><li style="box-sizing: border-box; padding: 0px 5px;">90</li><li style="box-sizing: border-box; padding: 0px 5px;">91</li><li style="box-sizing: border-box; padding: 0px 5px;">92</li><li style="box-sizing: border-box; padding: 0px 5px;">93</li><li style="box-sizing: border-box; padding: 0px 5px;">94</li><li style="box-sizing: border-box; padding: 0px 5px;">95</li><li style="box-sizing: border-box; padding: 0px 5px;">96</li><li style="box-sizing: border-box; padding: 0px 5px;">97</li><li style="box-sizing: border-box; padding: 0px 5px;">98</li><li style="box-sizing: border-box; padding: 0px 5px;">99</li><li style="box-sizing: border-box; padding: 0px 5px;">100</li><li style="box-sizing: border-box; padding: 0px 5px;">101</li><li style="box-sizing: border-box; padding: 0px 5px;">102</li><li style="box-sizing: border-box; padding: 0px 5px;">103</li><li style="box-sizing: border-box; padding: 0px 5px;">104</li><li style="box-sizing: border-box; padding: 0px 5px;">105</li><li style="box-sizing: border-box; padding: 0px 5px;">106</li><li style="box-sizing: border-box; padding: 0px 5px;">107</li><li style="box-sizing: border-box; padding: 0px 5px;">108</li><li style="box-sizing: border-box; padding: 0px 5px;">109</li><li style="box-sizing: border-box; padding: 0px 5px;">110</li><li style="box-sizing: border-box; padding: 0px 5px;">111</li><li style="box-sizing: border-box; padding: 0px 5px;">112</li><li style="box-sizing: border-box; padding: 0px 5px;">113</li><li style="box-sizing: border-box; padding: 0px 5px;">114</li><li style="box-sizing: border-box; padding: 0px 5px;">115</li><li style="box-sizing: border-box; padding: 0px 5px;">116</li><li style="box-sizing: border-box; padding: 0px 5px;">117</li></ul>

效果： 
这里写图片描述

思考的问题：

这里我们启用了CellEditing插件，其他的部分并没有什么变化。可是看到的结果是，现在可以用TextField的方式随意修改单元格。记得不能让单元格为空，否则无法修改。

默认情况下，需要双击单元格才能激活编辑器，从而进行修改。不过，也可以给表格配置上clicksToEdit:1，这样就可以通过单击单元格激活编辑器，从而进行修改，上面的代码中已经用到了。

TextField不允许输入空值，因为在创建columns时对应的editor设置了allowBlank:false属性。allowBlank:false表示不运行在TextField中输入空值。

上面的示例中用到了数组对象的Slice(start,[end])方法，该方法返回一个新数组，包含了原函数从start到end所指定的元素，但是不包括end元素，比如a.slice(0,3)。如果start为负，则将它作为length+start处理（此处length为数组的长度，比如a.slice(-3,4)，相当于a.slice(2,4)）。如果end为负，就将它作为length+end处理（次数length为数组的长度，比如a.slice(0,-1)。如果省略end，那么slice方法将一直复制到原数组结尾，比如a.slice(1)）。如果省略end，那么slice方法将一直复制到原数组结尾，比如a.slice(1)。如果end出现在start之前，不复制任何元素到新数组中，比如a.slice(4,3)。示例中store.getModifiedRecords().slice(0)的作用就是复制store.getModifiedRecords()，保证store.getModifiedRecords()中的原始数据不受影响。

如何添加单击事件

<code class="hljs lua has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">   listeners:
        {
             cellclick: <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(view, td, cellIndex, record, tr, rowIndex, e, eOpts)</span></span> {
                // Ext.Msg.alert(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'Selected Record'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'Name : '</span> + record.get(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'id'</span>) + <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">' '</span> + record.get(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'name'</span>));
                 <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span>(cellIndex == <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>) { // cellIndex starts from <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>
                     Ext.Msg.alert(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'Selected Record'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'Name : '</span> + record.get(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'id'</span>) + <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">' '</span> + record.get(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'name'</span>));
                 }
             },
             afteredit: <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(val)</span></span> { 
                 alert(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>)
       } ,</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li></ul><div class="save_code tracking-ad" data-mod="popu_249" style="box-sizing: border-box; position: absolute; height: 60px; right: 30px; top: 5px; color: rgb(255, 255, 255); cursor: pointer; z-index: 2;"><a target=_blank target="_blank" style="color: rgb(255, 153, 0); box-sizing: border-box;"><img src="http://static.blog.csdn.net/images/save_snippets.png" style="border: none; box-sizing: border-box; max-width: 100%;" alt="" /></a></div><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li></ul>

ok基本可以了。

chengchen404
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
extjs 学习笔记 四 带分页的grid
12-09
extjs也不例外，它对分页也提供了强大而方便的支持，使得我们在分页处理上可以得心应手。 在extjs中，类Ext.PagingToolbar封装了关于分页的操作，该类从Toolbar继承而来，单从名字上看，我们也猜得出这是一个能够...
Extjs4.2表格输入框实时编辑事件
小宇宙
10-13 147
【代码】Extjs4.2表格输入框实时编辑事件。
ExtJS4.2学习(七)EditorGrid可编辑表格
weixin_34038652的博客
11-29 282
上节讲到通过后台数据进行分页，分页工具条还可以放置在顶端，或者上下都有而不影响数据，因为它们都共用一个store//创建表格 var grid = new Ext.grid.GridPanel({ renderTo:'grid', //渲染位置 autoHeight:true, store:store, ...
ExtJs--EditorGrid可编辑的表格控件
007liuchao007
03-28 360
[url]http://www.360doc.com/content/12/0531/14/8072791_214975686.shtml[/url] 可编辑表格控件： ------------------------------------------------------------------ 无标题文档 //可编辑表格控件EditorGrid ...
使用ExtJs开发MIS系统（5）：使用Action抽象客户端操作
weixin_34220834的博客
10-18 67
在客户端系统中，或者说在任何系统中，同样的操作是可以通过不同的方式激发的，比如说我们使用的浏览器，刷新当前页面可以点击刷新按钮，可以在右键菜单中选择刷新，还可以按F5快捷键。但不管操作方式如何变化，操作本身是不变的，所以我们可以把这些操作抽象出来。 来看以下代码： 1: Srims.Action = new function(){ 2:...
ExtJS中设置下拉列表框不可编辑的方法
10-25
主要介绍了ExtJS中设置下拉列表框不可编辑的方法,需要的朋友可以参考下
ExtJS4 表格的嵌套 rowExpander应用
10-26
今天做一个grid，里面的数据需要带明细，思来想去还是搞个表格嵌套吧,需要的朋友可以参考下
extjs技术学习资料ppt.zip
最新发布
10-29
extjs技术学习资料ppt
extjs EditorGridPanel禁止某些单元格编辑
热门推荐
嘻嘻哈哈的专栏
03-29 1万+
给EditorGridPanel加上listeners 'cellclick' : function(grid, rowIndex, columnIndex, e) { var record = grid.getStore().getAt(rowIndex); if(record.get('editable') == 'N' && columnIndex == 2） return f
extjs editgrid示例代码
06-06
extjs editgrid示例代码extjs editgrid示例代码extjs editgrid示例代码extjs editgrid示例代码
可编辑表格Ext.grid.EditorGridPanel
04-17
此文档是可编辑表格Ext.grid.EditorGridPanel的说明以及示例的源代码，放到eclipse里面即可运行，显示出效果！
Extjs grid表格根据条件判断某行是否可编辑
樱花园丁
01-08 1933
//grid编辑 var grid = Ext.getCmp('gridMain'); grid.addPlugin( Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 1 }) ); //单元格禁止编辑 grid.addListener...
extjs中的表格编辑
01-16 1204
要实现ext表格编辑首先需要启用CellEditing插件，示例代码如下： grid = Ext.create('Ext.grid.Panel', { renderTo : 'information_date',// 渲染到一个div上 frame : true,// 面板渲染 forceFit : true,// 自动填充panel空白处 autoHeight:true,
extjs 表格为可编辑，保存后为不可编辑状态
weixin_30675247的博客
06-23 282
画出表格 编辑后 思路：在初始时设置一个状态，panduan='0'，此时，就是一个不可编辑的input，当点击编辑时，改变panduan = '1'，即可编辑。保存是加入正则表达式的判断，在将panduan='0'var columnsSet = { '姓名' : { align : 'center', ...
ExtJS4.2学习(七)EditorGrid可编辑表格(转)
weixin_34004750的博客
11-20 158
鸣谢地址：http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-14/176.html ---------------------------------------------------------------------------------------------- 以上实现的效果就是本节所要做...
Extjs grid 中 checkbox列无法编辑的解决
walle的博客
06-17 1720
Extjs grid单元格编辑，有一个字段【只读】readonly，设置xtype为checkcolumn，但点击checkbox时状态切换有问题，只能把选中的改为不选中，不选中的却无法选中 var fieldCellEditing = Ext.create("PSI.UX.CellEditing", { clicksToEdit: 1, //点击几次进入编辑...
行编辑动态设置某个单元格进入编辑状态/不可编辑
weixin_34206899的博客
10-30 2608
行编辑时特定单元格编辑 设置列qtype的editable属性值为true，表示此字段可编辑；然后设置id对应的行进入编辑状态，此时该行中所有的可编辑列都将进入编辑状态。 $("#jqgridTable").setColProp("qtype",{editable:true}); $("#jqgridTable").editRow(id,true); qtype列名 id ...
ExtJs表格控件（三）----单元格编辑与提交修改
翻滚吧小牛
02-13 4538
ExtJs的EditorGrid控件提供了动态修改某个单元格的方法，首先如果要使用编辑插件，首先必须要在需要的列上添加editor属性，只有添加了editor属性的列才可以被编辑，否则无法编辑。同时我们可以在editor中添加一些限制或者约束条件，例如禁止编辑的单元格为空，首先在定义列的时候使用如下方法定义： var columns = [{ header : '第一列', da
extjs2 可编辑表格 弹出窗口
07-27
在 ExtJS2 中，要实现可编辑表格并在编辑时弹出窗口，你可以使用 GridPanel 的编辑插件（EditingGridPanel）和窗口组件（Window）的结合。 首先，你需要创建一个可编辑的 GridPanel，并为其指定一个编辑插件。然后...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值