knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
datahub/docs/src/view.grid.html
Rufus Pollock e2ab6a51aa [build][xs]: regular build of docs and lib.
2014-02-06 09:30:40 +00:00

232 lines
48 KiB
HTML
Raw Blame History

<!DOCTYPE html> <html> <head> <title>view.grid.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.flot.html"> view.flot.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> <a class="source" href="widget.valuefilter.html"> widget.valuefilter.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> view.grid.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">&#182;</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*jshint multistr:true */</span>
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">||</span> <span class="p">{};</span>
<span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">my</span><span class="p">)</span> <span class="p">{</span>
<span class="s2">&quot;use strict&quot;</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">&#182;</a> </div> <h2>(Data) Grid Dataset View</h2>
<p>Provides a tabular view on a Dataset.</p>
<p>Initialize it with a <code>recline.Model.Dataset</code>.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">Grid</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
<span class="nx">tagName</span><span class="o">:</span> <span class="s2">&quot;div&quot;</span><span class="p">,</span>
<span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;recline-grid-container&quot;</span><span class="p">,</span>
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">modelEtc</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
<span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">&#39;render&#39;</span><span class="p">,</span> <span class="s1">&#39;onHorizontalScroll&#39;</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">listenTo</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">records</span><span class="p">,</span> <span class="s1">&#39;add reset remove&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">tempState</span> <span class="o">=</span> <span class="p">{};</span>
<span class="kd">var</span> <span class="nx">state</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
<span class="nx">hiddenFields</span><span class="o">:</span> <span class="p">[]</span>
<span class="p">},</span> <span class="nx">modelEtc</span><span class="p">.</span><span class="nx">state</span>
<span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">state</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">ObjectState</span><span class="p">(</span><span class="nx">state</span><span class="p">);</span>
<span class="p">},</span>
<span class="nx">events</span><span class="o">:</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">&#182;</a> </div> <p>does not work here so done at end of render function
'scroll .recline-grid tbody': 'onHorizontalScroll'</p> </td> <td class="code"> <div class="highlight"><pre> <span class="p">},</span></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">&#182;</a> </div> <p>======================================================
Column and row menus</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">setColumnSort</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">order</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">sort</span> <span class="o">=</span> <span class="p">[{}];</span>
<span class="nx">sort</span><span class="p">[</span><span class="mi">0</span><span class="p">][</span><span class="k">this</span><span class="p">.</span><span class="nx">tempState</span><span class="p">.</span><span class="nx">currentColumn</span><span class="p">]</span> <span class="o">=</span> <span class="p">{</span><span class="nx">order</span><span class="o">:</span> <span class="nx">order</span><span class="p">};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">query</span><span class="p">({</span><span class="nx">sort</span><span class="o">:</span> <span class="nx">sort</span><span class="p">});</span>
<span class="p">},</span>
<span class="nx">hideColumn</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">hiddenFields</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;hiddenFields&#39;</span><span class="p">);</span>
<span class="nx">hiddenFields</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">tempState</span><span class="p">.</span><span class="nx">currentColumn</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">hiddenFields</span><span class="o">:</span> <span class="nx">hiddenFields</span><span class="p">});</span></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">&#182;</a> </div> <p>change event not being triggered (because it is an array?) so trigger manually</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;change&#39;</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
<span class="p">},</span>
<span class="nx">showColumn</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">hiddenFields</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">without</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;hiddenFields&#39;</span><span class="p">),</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">).</span><span class="nx">data</span><span class="p">(</span><span class="s1">&#39;column&#39;</span><span class="p">));</span>
<span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">hiddenFields</span><span class="o">:</span> <span class="nx">hiddenFields</span><span class="p">});</span>
<span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
<span class="p">},</span>
<span class="nx">onHorizontalScroll</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">currentScroll</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">).</span><span class="nx">scrollLeft</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;.recline-grid thead tr&#39;</span><span class="p">).</span><span class="nx">scrollLeft</span><span class="p">(</span><span class="nx">currentScroll</span><span class="p">);</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">&#182;</a> </div> <p>======================================================</p>
<h4>Templating</h4> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">template</span><span class="o">:</span> <span class="s1">&#39; \</span>
<span class="s1"> &lt;div class=&quot;table-container&quot;&gt; \</span>
<span class="s1"> &lt;table class=&quot;recline-grid table-striped table-condensed&quot; cellspacing=&quot;0&quot;&gt; \</span>
<span class="s1"> &lt;thead class=&quot;fixed-header&quot;&gt; \</span>
<span class="s1"> &lt;tr&gt; \</span>
<span class="s1"> {{#fields}} \</span>
<span class="s1"> &lt;th class=&quot;column-header {{#hidden}}hidden{{/hidden}}&quot; data-field=&quot;{{id}}&quot; style=&quot;width: {{width}}px; max-width: {{width}}px; min-width: {{width}}px;&quot; title=&quot;{{label}}&quot;&gt; \</span>
<span class="s1"> &lt;span class=&quot;column-header-name&quot;&gt;{{label}}&lt;/span&gt; \</span>
<span class="s1"> &lt;/th&gt; \</span>
<span class="s1"> {{/fields}} \</span>
<span class="s1"> &lt;th class=&quot;last-header&quot; style=&quot;width: {{lastHeaderWidth}}px; max-width: {{lastHeaderWidth}}px; min-width: {{lastHeaderWidth}}px; padding: 0; margin: 0;&quot;&gt;&lt;/th&gt; \</span>
<span class="s1"> &lt;/tr&gt; \</span>
<span class="s1"> &lt;/thead&gt; \</span>
<span class="s1"> &lt;tbody class=&quot;scroll-content&quot;&gt;&lt;/tbody&gt; \</span>
<span class="s1"> &lt;/table&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &#39;</span><span class="p">,</span>
<span class="nx">toTemplateJSON</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">modelData</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span>
<span class="nx">modelData</span><span class="p">.</span><span class="nx">notEmpty</span> <span class="o">=</span> <span class="p">(</span> <span class="k">this</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">length</span> <span class="o">&gt;</span> <span class="mi">0</span> <span class="p">);</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">&#182;</a> </div> <p>TODO: move this sort of thing into a toTemplateJSON method on Dataset?</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">modelData</span><span class="p">.</span><span class="nx">fields</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">field</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span>
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">&#182;</a> </div> <p>last header width = scroll bar - border (2px) */</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">modelData</span><span class="p">.</span><span class="nx">lastHeaderWidth</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">scrollbarDimensions</span><span class="p">.</span><span class="nx">width</span> <span class="o">-</span> <span class="mi">2</span><span class="p">;</span>
<span class="k">return</span> <span class="nx">modelData</span><span class="p">;</span>
<span class="p">},</span>
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">fields</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">FieldList</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">_</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;hiddenFields&#39;</span><span class="p">),</span> <span class="nx">field</span><span class="p">.</span><span class="nx">id</span><span class="p">)</span> <span class="o">==</span> <span class="o">-</span><span class="mi">1</span><span class="p">;</span>
<span class="p">}));</span>
<span class="k">this</span><span class="p">.</span><span class="nx">scrollbarDimensions</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">scrollbarDimensions</span> <span class="o">||</span> <span class="k">this</span><span class="p">.</span><span class="nx">_scrollbarSize</span><span class="p">();</span> <span class="c1">// skip measurement if already have dimensions</span>
<span class="kd">var</span> <span class="nx">numFields</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">&#182;</a> </div> <p>compute field widths (-20 for first menu col + 10px for padding on each col and finally 16px for the scrollbar)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">fullWidth</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">width</span><span class="p">()</span> <span class="o">-</span> <span class="mi">20</span> <span class="o">-</span> <span class="mi">10</span> <span class="o">*</span> <span class="nx">numFields</span> <span class="o">-</span> <span class="k">this</span><span class="p">.</span><span class="nx">scrollbarDimensions</span><span class="p">.</span><span class="nx">width</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">width</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="mi">50</span><span class="p">,</span> <span class="nx">fullWidth</span> <span class="o">/</span> <span class="nx">numFields</span><span class="p">),</span> <span class="mi">10</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">&#182;</a> </div> <p>if columns extend outside viewport then remainder is 0 </p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">remainder</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="nx">fullWidth</span> <span class="o">-</span> <span class="nx">numFields</span> <span class="o">*</span> <span class="nx">width</span><span class="p">,</span><span class="mi">0</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">field</span><span class="p">,</span> <span class="nx">idx</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">&#182;</a> </div> <p>add the remainder to the first field width so we make up full col</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">idx</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">field</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">width</span><span class="o">:</span> <span class="nx">width</span><span class="o">+</span><span class="nx">remainder</span><span class="p">});</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">field</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">width</span><span class="o">:</span> <span class="nx">width</span><span class="p">});</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="kd">var</span> <span class="nx">htmls</span> <span class="o">=</span> <span class="nx">Mustache</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">template</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">toTemplateJSON</span><span class="p">());</span>
<span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="nx">htmls</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">records</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">doc</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">tr</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;&lt;tr /&gt;&#39;</span><span class="p">);</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;tbody&#39;</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="nx">tr</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">newView</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">GridRow</span><span class="p">({</span>
<span class="nx">model</span><span class="o">:</span> <span class="nx">doc</span><span class="p">,</span>
<span class="nx">el</span><span class="o">:</span> <span class="nx">tr</span><span class="p">,</span>
<span class="nx">fields</span><span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">fields</span>
<span class="p">});</span>
<span class="nx">newView</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">&#182;</a> </div> <p>hide extra header col if no scrollbar to avoid unsightly overhang</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">$tbody</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;tbody&#39;</span><span class="p">)[</span><span class="mi">0</span><span class="p">];</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">$tbody</span><span class="p">.</span><span class="nx">scrollHeight</span> <span class="o">&lt;=</span> <span class="nx">$tbody</span><span class="p">.</span><span class="nx">offsetHeight</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;th.last-header&#39;</span><span class="p">).</span><span class="nx">hide</span><span class="p">();</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;.recline-grid&#39;</span><span class="p">).</span><span class="nx">toggleClass</span><span class="p">(</span><span class="s1">&#39;no-hidden&#39;</span><span class="p">,</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;hiddenFields&#39;</span><span class="p">).</span><span class="nx">length</span> <span class="o">===</span> <span class="mi">0</span><span class="p">));</span>
<span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;.recline-grid tbody&#39;</span><span class="p">).</span><span class="nx">scroll</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">onHorizontalScroll</span><span class="p">);</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">&#182;</a> </div> <h3>_scrollbarSize</h3>
<p>Measure width of a vertical scrollbar and height of a horizontal scrollbar.</p>
<p>@return: { width: pixelWidth, height: pixelHeight }</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_scrollbarSize</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">$c</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;&lt;div style=&#39;position:absolute; top:-10000px; left:-10000px; width:100px; height:100px; overflow:scroll;&#39;&gt;&lt;/div&gt;&quot;</span><span class="p">).</span><span class="nx">appendTo</span><span class="p">(</span><span class="s2">&quot;body&quot;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">dim</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">width</span><span class="o">:</span> <span class="nx">$c</span><span class="p">.</span><span class="nx">width</span><span class="p">()</span> <span class="o">-</span> <span class="nx">$c</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">clientWidth</span> <span class="o">+</span> <span class="mi">1</span><span class="p">,</span> <span class="nx">height</span><span class="o">:</span> <span class="nx">$c</span><span class="p">.</span><span class="nx">height</span><span class="p">()</span> <span class="o">-</span> <span class="nx">$c</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">clientHeight</span> <span class="p">};</span>
<span class="nx">$c</span><span class="p">.</span><span class="nx">remove</span><span class="p">();</span>
<span class="k">return</span> <span class="nx">dim</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">&#182;</a> </div> <h2>GridRow View for rendering an individual record.</h2>
<p>Since we want this to update in place it is up to creator to provider the element to attach to.</p>
<p>In addition you <em>must</em> pass in a FieldList in the constructor options. This should be list of fields for the Grid.</p>
<p>Example:</p>
<pre>
var row = new GridRow({
model: dataset-record,
el: dom-element,
fields: mydatasets.fields // a FieldList object
});
</pre> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">GridRow</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">initData</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">&#39;render&#39;</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_fields</span> <span class="o">=</span> <span class="nx">initData</span><span class="p">.</span><span class="nx">fields</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">listenTo</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">,</span> <span class="s1">&#39;change&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
<span class="p">},</span>
<span class="nx">template</span><span class="o">:</span> <span class="s1">&#39; \</span>
<span class="s1"> {{#cells}} \</span>
<span class="s1"> &lt;td data-field=&quot;{{field}}&quot; style=&quot;width: {{width}}px; max-width: {{width}}px; min-width: {{width}}px;&quot;&gt; \</span>
<span class="s1"> &lt;div class=&quot;data-table-cell-content&quot;&gt; \</span>
<span class="s1"> &lt;a href=&quot;javascript:{}&quot; class=&quot;data-table-cell-edit&quot; title=&quot;Edit this cell&quot;&gt;&amp;nbsp;&lt;/a&gt; \</span>
<span class="s1"> &lt;div class=&quot;data-table-cell-value&quot;&gt;{{{value}}}&lt;/div&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;/td&gt; \</span>
<span class="s1"> {{/cells}} \</span>
<span class="s1"> &#39;</span><span class="p">,</span>
<span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
<span class="s1">&#39;click .data-table-cell-edit&#39;</span><span class="o">:</span> <span class="s1">&#39;onEditClick&#39;</span><span class="p">,</span>
<span class="s1">&#39;click .data-table-cell-editor .okButton&#39;</span><span class="o">:</span> <span class="s1">&#39;onEditorOK&#39;</span><span class="p">,</span>
<span class="s1">&#39;click .data-table-cell-editor .cancelButton&#39;</span><span class="o">:</span> <span class="s1">&#39;onEditorCancel&#39;</span>
<span class="p">},</span>
<span class="nx">toTemplateJSON</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">doc</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">cellData</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_fields</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">{</span>
<span class="nx">field</span><span class="o">:</span> <span class="nx">field</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span>
<span class="nx">width</span><span class="o">:</span> <span class="nx">field</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;width&#39;</span><span class="p">),</span>
<span class="nx">value</span><span class="o">:</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">getFieldValue</span><span class="p">(</span><span class="nx">field</span><span class="p">)</span>
<span class="p">};</span>
<span class="p">});</span>
<span class="k">return</span> <span class="p">{</span> <span class="nx">id</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span> <span class="nx">cells</span><span class="o">:</span> <span class="nx">cellData</span> <span class="p">};</span>
<span class="p">},</span>
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;data-id&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">html</span> <span class="o">=</span> <span class="nx">Mustache</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">template</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">toTemplateJSON</span><span class="p">());</span>
<span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="nx">html</span><span class="p">);</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">&#182;</a> </div> <p>===================
Cell Editor methods</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">cellEditorTemplate</span><span class="o">:</span> <span class="s1">&#39; \</span>
<span class="s1"> &lt;div class=&quot;menu-container data-table-cell-editor&quot;&gt; \</span>
<span class="s1"> &lt;textarea class=&quot;data-table-cell-editor-editor&quot; bind=&quot;textarea&quot;&gt;{{value}}&lt;/textarea&gt; \</span>
<span class="s1"> &lt;div id=&quot;data-table-cell-editor-actions&quot;&gt; \</span>
<span class="s1"> &lt;div class=&quot;data-table-cell-editor-action&quot;&gt; \</span>
<span class="s1"> &lt;button class=&quot;okButton btn primary&quot;&gt;Update&lt;/button&gt; \</span>
<span class="s1"> &lt;button class=&quot;cancelButton btn danger&quot;&gt;Cancel&lt;/button&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &#39;</span><span class="p">,</span>
<span class="nx">onEditClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">editing</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;.data-table-cell-editor-editor&#39;</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">editing</span><span class="p">.</span><span class="nx">length</span> <span class="o">&gt;</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">editing</span><span class="p">.</span><span class="nx">parents</span><span class="p">(</span><span class="s1">&#39;.data-table-cell-value&#39;</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="nx">editing</span><span class="p">.</span><span class="nx">text</span><span class="p">()).</span><span class="nx">siblings</span><span class="p">(</span><span class="s1">&#39;.data-table-cell-edit&#39;</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">&quot;hidden&quot;</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">&quot;hidden&quot;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">cell</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">).</span><span class="nx">siblings</span><span class="p">(</span><span class="s1">&#39;.data-table-cell-value&#39;</span><span class="p">);</span>
<span class="nx">cell</span><span class="p">.</span><span class="nx">data</span><span class="p">(</span><span class="s2">&quot;previousContents&quot;</span><span class="p">,</span> <span class="nx">cell</span><span class="p">.</span><span class="nx">text</span><span class="p">());</span>
<span class="kd">var</span> <span class="nx">templated</span> <span class="o">=</span> <span class="nx">Mustache</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">cellEditorTemplate</span><span class="p">,</span> <span class="p">{</span><span class="nx">value</span><span class="o">:</span> <span class="nx">cell</span><span class="p">.</span><span class="nx">text</span><span class="p">()});</span>
<span class="nx">cell</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="nx">templated</span><span class="p">);</span>
<span class="p">},</span>
<span class="nx">onEditorOK</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">cell</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">rowId</span> <span class="o">=</span> <span class="nx">cell</span><span class="p">.</span><span class="nx">parents</span><span class="p">(</span><span class="s1">&#39;tr&#39;</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;data-id&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">field</span> <span class="o">=</span> <span class="nx">cell</span><span class="p">.</span><span class="nx">parents</span><span class="p">(</span><span class="s1">&#39;td&#39;</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;data-field&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">newValue</span> <span class="o">=</span> <span class="nx">cell</span><span class="p">.</span><span class="nx">parents</span><span class="p">(</span><span class="s1">&#39;.data-table-cell-editor&#39;</span><span class="p">).</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;.data-table-cell-editor-editor&#39;</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">newData</span> <span class="o">=</span> <span class="p">{};</span>
<span class="nx">newData</span><span class="p">[</span><span class="nx">field</span><span class="p">]</span> <span class="o">=</span> <span class="nx">newValue</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">newData</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;recline:flash&#39;</span><span class="p">,</span> <span class="p">{</span><span class="nx">message</span><span class="o">:</span> <span class="s2">&quot;Updating row...&quot;</span><span class="p">,</span> <span class="nx">loader</span><span class="o">:</span> <span class="kc">true</span><span class="p">});</span>
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">save</span><span class="p">().</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">response</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;recline:flash&#39;</span><span class="p">,</span> <span class="p">{</span><span class="nx">message</span><span class="o">:</span> <span class="s2">&quot;Row updated successfully&quot;</span><span class="p">,</span> <span class="nx">category</span><span class="o">:</span> <span class="s1">&#39;success&#39;</span><span class="p">});</span>
<span class="p">})</span>
<span class="p">.</span><span class="nx">fail</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;recline:flash&#39;</span><span class="p">,</span> <span class="p">{</span>
<span class="nx">message</span><span class="o">:</span> <span class="s1">&#39;Error saving row&#39;</span><span class="p">,</span>
<span class="nx">category</span><span class="o">:</span> <span class="s1">&#39;error&#39;</span><span class="p">,</span>
<span class="nx">persist</span><span class="o">:</span> <span class="kc">true</span>
<span class="p">});</span>
<span class="p">});</span>
<span class="p">},</span>
<span class="nx">onEditorCancel</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">cell</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">).</span><span class="nx">parents</span><span class="p">(</span><span class="s1">&#39;.data-table-cell-value&#39;</span><span class="p">);</span>
<span class="nx">cell</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="nx">cell</span><span class="p">.</span><span class="nx">data</span><span class="p">(</span><span class="s1">&#39;previousContents&#39;</span><span class="p">)).</span><span class="nx">siblings</span><span class="p">(</span><span class="s1">&#39;.data-table-cell-edit&#39;</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">&quot;hidden&quot;</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="p">})(</span><span class="nx">jQuery</span><span class="p">,</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">View</span><span class="p">);</span>
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>
Reference in New Issue View Git Blame Copy Permalink