426 lines
87 KiB
HTML
426 lines
87 KiB
HTML
<!DOCTYPE html> <html> <head> <title>view.slickgrid.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 … <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.slickgrid.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">¶</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">"use strict"</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">¶</a> </div> <p>Add new grid Control to display a new row add menu bouton
|
|
It display a simple side-bar menu ,for user to add new
|
|
row to grid </p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">GridControl</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">className</span><span class="o">:</span> <span class="s2">"recline-row-add"</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">¶</a> </div> <p>Template for row edit menu , change it if you don't love</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">template</span><span class="o">:</span> <span class="s1">'<h1><a href="#" class="recline-row-add btn">Add row</a></h1>'</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">options</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">'render'</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="k">this</span><span class="p">.</span><span class="nx">render</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">$el</span><span class="p">.</span><span class="nx">html</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="p">},</span>
|
|
|
|
<span class="nx">events</span> <span class="o">:</span> <span class="p">{</span>
|
|
<span class="s2">"click .recline-row-add"</span> <span class="o">:</span> <span class="s2">"addNewRow"</span>
|
|
<span class="p">},</span>
|
|
|
|
<span class="nx">addNewRow</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="nx">e</span><span class="p">.</span><span class="nx">preventDefault</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">trigger</span><span class="p">(</span><span class="s2">"change"</span><span class="p">)</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
<span class="p">);</span></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> <h2>SlickGrid Dataset View</h2>
|
|
|
|
<p>Provides a tabular view on a Dataset, based on SlickGrid.</p>
|
|
|
|
<p>https://github.com/mleibman/SlickGrid</p>
|
|
|
|
<p>Initialize it with a <code>recline.Model.Dataset</code>.</p>
|
|
|
|
<p>Additional options to drive SlickGrid grid can be given through state.
|
|
The following keys allow for customization:
|
|
* gridOptions: to add options at grid level
|
|
* columnsEditor: to add editor for editable columns</p>
|
|
|
|
<p>For example:
|
|
var grid = new recline.View.SlickGrid({
|
|
model: dataset,
|
|
el: $el,
|
|
state: {
|
|
gridOptions: {
|
|
editable: true,
|
|
enableAddRows: true
|
|
...
|
|
},
|
|
columnsEditor: [
|
|
{column: 'date', editor: Slick.Editors.Date },
|
|
{column: 'title', editor: Slick.Editors.Text}
|
|
]
|
|
}
|
|
});
|
|
// NB: you need an explicit height on the element for slickgrid to work</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">SlickGrid</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">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="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="s1">'recline-slickgrid'</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">¶</a> </div> <p>Template for row delete menu , change it if you don't love </p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">templates</span> <span class="o">=</span> <span class="p">{</span>
|
|
<span class="s2">"deleterow"</span> <span class="o">:</span> <span class="s1">'<a href="#" class="recline-row-delete btn">X</a>'</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">'render'</span><span class="p">,</span> <span class="s1">'onRecordChanged'</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">'add remove reset'</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">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">'change'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">onRecordChanged</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">hiddenColumns</span><span class="o">:</span> <span class="p">[],</span>
|
|
<span class="nx">columnsOrder</span><span class="o">:</span> <span class="p">[],</span>
|
|
<span class="nx">columnsSort</span><span class="o">:</span> <span class="p">{},</span>
|
|
<span class="nx">columnsWidth</span><span class="o">:</span> <span class="p">[],</span>
|
|
<span class="nx">columnsEditor</span><span class="o">:</span> <span class="p">[],</span>
|
|
<span class="nx">options</span><span class="o">:</span> <span class="p">{},</span>
|
|
<span class="nx">fitColumns</span><span class="o">:</span> <span class="kc">false</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="k">this</span><span class="p">.</span><span class="nx">_slickHandler</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Slick</span><span class="p">.</span><span class="nx">EventHandler</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">¶</a> </div> <p>add menu for new row , check if enableAddRow is set to true or not set</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</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="s2">"gridOptions"</span><span class="p">)</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="s2">"gridOptions"</span><span class="p">).</span><span class="nx">enabledAddRow</span> <span class="o">!=</span> <span class="kc">undefined</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="s2">"gridOptions"</span><span class="p">).</span><span class="nx">enabledAddRow</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">editor</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">GridControl</span><span class="p">()</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">elSidebar</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">editor</span><span class="p">.</span><span class="nx">$el</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">editor</span><span class="p">.</span><span class="nx">state</span><span class="p">,</span> <span class="s1">'change'</span><span class="p">,</span> <span class="kd">function</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">add</span><span class="p">(</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">Record</span><span class="p">())</span>
|
|
<span class="p">});</span>
|
|
<span class="p">}</span>
|
|
<span class="p">},</span>
|
|
<span class="nx">onRecordChanged</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">record</span><span class="p">)</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">¶</a> </div> <p>Ignore if the grid is not yet drawn</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">grid</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">return</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">¶</a> </div> <p>Let's find the row corresponding to the index</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">row_index</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">grid</span><span class="p">.</span><span class="nx">getData</span><span class="p">().</span><span class="nx">getModelRow</span><span class="p">(</span> <span class="nx">record</span> <span class="p">);</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">grid</span><span class="p">.</span><span class="nx">invalidateRow</span><span class="p">(</span><span class="nx">row_index</span><span class="p">);</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">grid</span><span class="p">.</span><span class="nx">getData</span><span class="p">().</span><span class="nx">updateItem</span><span class="p">(</span><span class="nx">record</span><span class="p">,</span> <span class="nx">row_index</span><span class="p">);</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">grid</span><span class="p">.</span><span class="nx">render</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="kd">var</span> <span class="nx">options</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">enableCellNavigation</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
<span class="nx">enableColumnReorder</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
<span class="nx">explicitInitialization</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
<span class="nx">syncColumnCellResize</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
<span class="nx">forceFitColumns</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">'fitColumns'</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">'gridOptions'</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">¶</a> </div> <p>We need all columns, even the hidden ones, to show on the column picker</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">columns</span> <span class="o">=</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">¶</a> </div> <p>custom formatter as default one escapes html
|
|
plus this way we distinguish between rendering/formatting and computed value (so e.g. sort still works ...)
|
|
row = row index, cell = cell index, value = value, columnDef = column definition, dataContext = full row values</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">formatter</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">row</span><span class="p">,</span> <span class="nx">cell</span><span class="p">,</span> <span class="nx">value</span><span class="p">,</span> <span class="nx">columnDef</span><span class="p">,</span> <span class="nx">dataContext</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">if</span><span class="p">(</span><span class="nx">columnDef</span><span class="p">.</span><span class="nx">id</span> <span class="o">==</span> <span class="s2">"del"</span><span class="p">){</span>
|
|
<span class="k">return</span> <span class="nx">self</span><span class="p">.</span><span class="nx">templates</span><span class="p">.</span><span class="nx">deleterow</span>
|
|
<span class="p">}</span>
|
|
<span class="kd">var</span> <span class="nx">field</span> <span class="o">=</span> <span class="nx">self</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">get</span><span class="p">(</span><span class="nx">columnDef</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">renderer</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">renderer</span><span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="nx">field</span><span class="p">,</span> <span class="nx">dataContext</span><span class="p">);</span>
|
|
<span class="p">}</span><span class="k">else</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="nx">value</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">¶</a> </div> <p>we need to be sure that user is entering a valid input , for exemple if
|
|
field is date type and field.format ='YY-MM-DD', we should be sure that
|
|
user enter a correct value </p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">validator</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">field</span><span class="p">){</span>
|
|
<span class="k">return</span> <span class="kd">function</span><span class="p">(</span><span class="nx">value</span><span class="p">){</span>
|
|
<span class="k">if</span><span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">type</span> <span class="o">==</span> <span class="s2">"date"</span> <span class="o">&&</span> <span class="nb">isNaN</span><span class="p">(</span><span class="nb">Date</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">value</span><span class="p">))){</span>
|
|
<span class="k">return</span> <span class="p">{</span>
|
|
<span class="nx">valid</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
|
|
<span class="nx">msg</span><span class="o">:</span> <span class="s2">"A date is required, check field field-date-format"</span><span class="p">};</span>
|
|
<span class="p">}</span><span class="k">else</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="p">{</span><span class="nx">valid</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">msg</span> <span class="o">:</span><span class="kc">null</span> <span class="p">}</span>
|
|
<span class="p">}</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">¶</a> </div> <p>Add row delete support , check if enableDelRow is set to true or not set</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</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="s2">"gridOptions"</span><span class="p">)</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="s2">"gridOptions"</span><span class="p">).</span><span class="nx">enabledDelRow</span> <span class="o">!=</span> <span class="kc">undefined</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="s2">"gridOptions"</span><span class="p">).</span><span class="nx">enabledDelRow</span> <span class="o">==</span> <span class="kc">true</span> <span class="p">){</span>
|
|
<span class="nx">columns</span><span class="p">.</span><span class="nx">push</span><span class="p">({</span>
|
|
<span class="nx">id</span><span class="o">:</span> <span class="s1">'del'</span><span class="p">,</span>
|
|
<span class="nx">name</span><span class="o">:</span> <span class="s1">'del'</span><span class="p">,</span>
|
|
<span class="nx">field</span><span class="o">:</span> <span class="s1">'del'</span><span class="p">,</span>
|
|
<span class="nx">sortable</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
<span class="nx">width</span><span class="o">:</span> <span class="mi">80</span><span class="p">,</span>
|
|
<span class="nx">formatter</span><span class="o">:</span> <span class="nx">formatter</span><span class="p">,</span>
|
|
<span class="nx">validator</span><span class="o">:</span><span class="nx">validator</span>
|
|
<span class="p">})}</span>
|
|
<span class="nx">_</span><span class="p">.</span><span class="nx">each</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">toJSON</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="kd">var</span> <span class="nx">column</span> <span class="o">=</span> <span class="p">{</span>
|
|
<span class="nx">id</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">name</span><span class="o">:</span> <span class="nx">field</span><span class="p">.</span><span class="nx">label</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">sortable</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
<span class="nx">minWidth</span><span class="o">:</span> <span class="mi">80</span><span class="p">,</span>
|
|
<span class="nx">formatter</span><span class="o">:</span> <span class="nx">formatter</span><span class="p">,</span>
|
|
<span class="nx">validator</span><span class="o">:</span><span class="nx">validator</span><span class="p">(</span><span class="nx">field</span><span class="p">)</span>
|
|
<span class="p">};</span>
|
|
<span class="kd">var</span> <span class="nx">widthInfo</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">find</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">'columnsWidth'</span><span class="p">),</span><span class="kd">function</span><span class="p">(</span><span class="nx">c</span><span class="p">){</span><span class="k">return</span> <span class="nx">c</span><span class="p">.</span><span class="nx">column</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="k">if</span> <span class="p">(</span><span class="nx">widthInfo</span><span class="p">){</span>
|
|
<span class="nx">column</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="nx">widthInfo</span><span class="p">.</span><span class="nx">width</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
<span class="kd">var</span> <span class="nx">editInfo</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">find</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">'columnsEditor'</span><span class="p">),</span><span class="kd">function</span><span class="p">(</span><span class="nx">c</span><span class="p">){</span><span class="k">return</span> <span class="nx">c</span><span class="p">.</span><span class="nx">column</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="k">if</span> <span class="p">(</span><span class="nx">editInfo</span><span class="p">){</span>
|
|
<span class="nx">column</span><span class="p">.</span><span class="nx">editor</span> <span class="o">=</span> <span class="nx">editInfo</span><span class="p">.</span><span class="nx">editor</span><span class="p">;</span>
|
|
<span class="p">}</span> <span class="k">else</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">¶</a> </div> <p>guess editor type</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">typeToEditorMap</span> <span class="o">=</span> <span class="p">{</span>
|
|
<span class="s1">'string'</span><span class="o">:</span> <span class="nx">Slick</span><span class="p">.</span><span class="nx">Editors</span><span class="p">.</span><span class="nx">LongText</span><span class="p">,</span>
|
|
<span class="s1">'integer'</span><span class="o">:</span> <span class="nx">Slick</span><span class="p">.</span><span class="nx">Editors</span><span class="p">.</span><span class="nx">IntegerEditor</span><span class="p">,</span>
|
|
<span class="s1">'number'</span><span class="o">:</span> <span class="nx">Slick</span><span class="p">.</span><span class="nx">Editors</span><span class="p">.</span><span class="nx">Text</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">¶</a> </div> <p>TODO: need a way to ensure we format date in the right way
|
|
Plus what if dates are in distant past or future ... (?)
|
|
'date': Slick.Editors.DateEditor,</p> </td> <td class="code"> <div class="highlight"><pre> <span class="s1">'date'</span><span class="o">:</span> <span class="nx">Slick</span><span class="p">.</span><span class="nx">Editors</span><span class="p">.</span><span class="nx">Text</span><span class="p">,</span>
|
|
<span class="s1">'boolean'</span><span class="o">:</span> <span class="nx">Slick</span><span class="p">.</span><span class="nx">Editors</span><span class="p">.</span><span class="nx">YesNoSelectEditor</span></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">¶</a> </div> <p>TODO: (?) percent ...</p> </td> <td class="code"> <div class="highlight"><pre> <span class="p">};</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">type</span> <span class="k">in</span> <span class="nx">typeToEditorMap</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">column</span><span class="p">.</span><span class="nx">editor</span> <span class="o">=</span> <span class="nx">typeToEditorMap</span><span class="p">[</span><span class="nx">field</span><span class="p">.</span><span class="nx">type</span><span class="p">]</span>
|
|
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
|
<span class="nx">column</span><span class="p">.</span><span class="nx">editor</span> <span class="o">=</span> <span class="nx">Slick</span><span class="p">.</span><span class="nx">Editors</span><span class="p">.</span><span class="nx">LongText</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
<span class="nx">columns</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">column</span><span class="p">);</span>
|
|
<span class="p">});</span> </pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">¶</a> </div> <p>Restrict the visible columns</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">visibleColumns</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="nx">columns</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">column</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">'hiddenColumns'</span><span class="p">),</span> <span class="nx">column</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></pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">¶</a> </div> <p>Order them if there is ordering info on the state</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</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">'columnsOrder'</span><span class="p">)</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">'columnsOrder'</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="p">{</span>
|
|
<span class="nx">visibleColumns</span> <span class="o">=</span> <span class="nx">visibleColumns</span><span class="p">.</span><span class="nx">sort</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span><span class="nx">b</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">'columnsOrder'</span><span class="p">),</span><span class="nx">a</span><span class="p">.</span><span class="nx">id</span><span class="p">)</span> <span class="o">></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">'columnsOrder'</span><span class="p">),</span><span class="nx">b</span><span class="p">.</span><span class="nx">id</span><span class="p">)</span> <span class="o">?</span> <span class="mi">1</span> <span class="o">:</span> <span class="o">-</span><span class="mi">1</span><span class="p">;</span>
|
|
<span class="p">});</span>
|
|
<span class="nx">columns</span> <span class="o">=</span> <span class="nx">columns</span><span class="p">.</span><span class="nx">sort</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span><span class="nx">b</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">'columnsOrder'</span><span class="p">),</span><span class="nx">a</span><span class="p">.</span><span class="nx">id</span><span class="p">)</span> <span class="o">></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">'columnsOrder'</span><span class="p">),</span><span class="nx">b</span><span class="p">.</span><span class="nx">id</span><span class="p">)</span> <span class="o">?</span> <span class="mi">1</span> <span class="o">:</span> <span class="o">-</span><span class="mi">1</span><span class="p">;</span>
|
|
<span class="p">});</span>
|
|
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">¶</a> </div> <p>Move hidden columns to the end, so they appear at the bottom of the
|
|
column picker</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">tempHiddenColumns</span> <span class="o">=</span> <span class="p">[];</span>
|
|
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="nx">columns</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span><span class="mi">1</span><span class="p">;</span> <span class="nx">i</span> <span class="o">>=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span><span class="o">--</span><span class="p">){</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">pluck</span><span class="p">(</span><span class="nx">visibleColumns</span><span class="p">,</span><span class="s1">'id'</span><span class="p">),</span><span class="nx">columns</span><span class="p">[</span><span class="nx">i</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="nx">tempHiddenColumns</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">columns</span><span class="p">.</span><span class="nx">splice</span><span class="p">(</span><span class="nx">i</span><span class="p">,</span><span class="mi">1</span><span class="p">)[</span><span class="mi">0</span><span class="p">]);</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
<span class="nx">columns</span> <span class="o">=</span> <span class="nx">columns</span><span class="p">.</span><span class="nx">concat</span><span class="p">(</span><span class="nx">tempHiddenColumns</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">¶</a> </div> <p>Transform a model object into a row</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">toRow</span><span class="p">(</span><span class="nx">m</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="kd">var</span> <span class="nx">row</span> <span class="o">=</span> <span class="p">{};</span>
|
|
<span class="nx">self</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">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="kd">var</span> <span class="nx">render</span> <span class="o">=</span> <span class="s2">""</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">¶</a> </div> <p>when adding row from slickgrid the field value is undefined</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span><span class="p">(</span><span class="o">!</span><span class="nx">_</span><span class="p">.</span><span class="nx">isUndefined</span><span class="p">(</span><span class="nx">m</span><span class="p">.</span><span class="nx">getFieldValueUnrendered</span><span class="p">(</span><span class="nx">field</span><span class="p">))){</span>
|
|
<span class="nx">render</span> <span class="o">=</span><span class="nx">m</span><span class="p">.</span><span class="nx">getFieldValueUnrendered</span><span class="p">(</span><span class="nx">field</span><span class="p">)</span>
|
|
<span class="p">}</span>
|
|
<span class="nx">row</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="nx">render</span>
|
|
<span class="p">});</span>
|
|
<span class="k">return</span> <span class="nx">row</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="kd">function</span> <span class="nx">RowSet</span><span class="p">()</span> <span class="p">{</span>
|
|
<span class="kd">var</span> <span class="nx">models</span> <span class="o">=</span> <span class="p">[];</span>
|
|
<span class="kd">var</span> <span class="nx">rows</span> <span class="o">=</span> <span class="p">[];</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">push</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">model</span><span class="p">,</span> <span class="nx">row</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">models</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">model</span><span class="p">);</span>
|
|
<span class="nx">rows</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">row</span><span class="p">);</span>
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">getLength</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span><span class="k">return</span> <span class="nx">rows</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="p">};</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">getItem</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">index</span><span class="p">)</span> <span class="p">{</span><span class="k">return</span> <span class="nx">rows</span><span class="p">[</span><span class="nx">index</span><span class="p">];};</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">getItemMetadata</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">index</span><span class="p">)</span> <span class="p">{</span><span class="k">return</span> <span class="p">{};};</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">getModel</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">index</span><span class="p">)</span> <span class="p">{</span><span class="k">return</span> <span class="nx">models</span><span class="p">[</span><span class="nx">index</span><span class="p">];};</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">getModelRow</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">m</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">models</span><span class="p">,</span> <span class="nx">m</span><span class="p">);};</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">updateItem</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">m</span><span class="p">,</span><span class="nx">i</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">rows</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">=</span> <span class="nx">toRow</span><span class="p">(</span><span class="nx">m</span><span class="p">);</span>
|
|
<span class="nx">models</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">=</span> <span class="nx">m</span><span class="p">;</span>
|
|
<span class="p">};</span>
|
|
|
|
<span class="p">}</span>
|
|
|
|
<span class="kd">var</span> <span class="nx">data</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">RowSet</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">each</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="nx">data</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">doc</span><span class="p">,</span> <span class="nx">toRow</span><span class="p">(</span><span class="nx">doc</span><span class="p">));</span>
|
|
<span class="p">});</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">grid</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Slick</span><span class="p">.</span><span class="nx">Grid</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">data</span><span class="p">,</span> <span class="nx">visibleColumns</span><span class="p">,</span> <span class="nx">options</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">¶</a> </div> <p>Column sorting</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">sortInfo</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">queryState</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'sort'</span><span class="p">);</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">sortInfo</span><span class="p">){</span>
|
|
<span class="kd">var</span> <span class="nx">column</span> <span class="o">=</span> <span class="nx">sortInfo</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">field</span><span class="p">;</span>
|
|
<span class="kd">var</span> <span class="nx">sortAsc</span> <span class="o">=</span> <span class="nx">sortInfo</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">order</span> <span class="o">!==</span> <span class="s1">'desc'</span><span class="p">;</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">grid</span><span class="p">.</span><span class="nx">setSortColumn</span><span class="p">(</span><span class="nx">column</span><span class="p">,</span> <span class="nx">sortAsc</span><span class="p">);</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">_slickHandler</span><span class="p">.</span><span class="nx">subscribe</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">grid</span><span class="p">.</span><span class="nx">onSort</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="nx">args</span><span class="p">){</span>
|
|
<span class="kd">var</span> <span class="nx">order</span> <span class="o">=</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">sortAsc</span><span class="p">)</span> <span class="o">?</span> <span class="s1">'asc'</span><span class="o">:</span><span class="s1">'desc'</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">field</span><span class="o">:</span> <span class="nx">args</span><span class="p">.</span><span class="nx">sortCol</span><span class="p">.</span><span class="nx">field</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="nx">self</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="k">this</span><span class="p">.</span><span class="nx">_slickHandler</span><span class="p">.</span><span class="nx">subscribe</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">grid</span><span class="p">.</span><span class="nx">onColumnsReordered</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="nx">args</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">set</span><span class="p">({</span><span class="nx">columnsOrder</span><span class="o">:</span> <span class="nx">_</span><span class="p">.</span><span class="nx">pluck</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">grid</span><span class="p">.</span><span class="nx">getColumns</span><span class="p">(),</span><span class="s1">'id'</span><span class="p">)});</span>
|
|
<span class="p">});</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">grid</span><span class="p">.</span><span class="nx">onColumnsResized</span><span class="p">.</span><span class="nx">subscribe</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="nx">args</span><span class="p">){</span>
|
|
<span class="kd">var</span> <span class="nx">columns</span> <span class="o">=</span> <span class="nx">args</span><span class="p">.</span><span class="nx">grid</span><span class="p">.</span><span class="nx">getColumns</span><span class="p">();</span>
|
|
<span class="kd">var</span> <span class="nx">defaultColumnWidth</span> <span class="o">=</span> <span class="nx">args</span><span class="p">.</span><span class="nx">grid</span><span class="p">.</span><span class="nx">getOptions</span><span class="p">().</span><span class="nx">defaultColumnWidth</span><span class="p">;</span>
|
|
<span class="kd">var</span> <span class="nx">columnsWidth</span> <span class="o">=</span> <span class="p">[];</span>
|
|
<span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">columns</span><span class="p">,</span><span class="kd">function</span><span class="p">(</span><span class="nx">column</span><span class="p">){</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">column</span><span class="p">.</span><span class="nx">width</span> <span class="o">!=</span> <span class="nx">defaultColumnWidth</span><span class="p">){</span>
|
|
<span class="nx">columnsWidth</span><span class="p">.</span><span class="nx">push</span><span class="p">({</span><span class="nx">column</span><span class="o">:</span><span class="nx">column</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">column</span><span class="p">.</span><span class="nx">width</span><span class="p">});</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">set</span><span class="p">({</span><span class="nx">columnsWidth</span><span class="o">:</span><span class="nx">columnsWidth</span><span class="p">});</span>
|
|
<span class="p">});</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">_slickHandler</span><span class="p">.</span><span class="nx">subscribe</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">grid</span><span class="p">.</span><span class="nx">onCellChange</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="nx">args</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">¶</a> </div> <p>We need to change the model associated value</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">grid</span> <span class="o">=</span> <span class="nx">args</span><span class="p">.</span><span class="nx">grid</span><span class="p">;</span>
|
|
<span class="kd">var</span> <span class="nx">model</span> <span class="o">=</span> <span class="nx">data</span><span class="p">.</span><span class="nx">getModel</span><span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">row</span><span class="p">);</span>
|
|
<span class="kd">var</span> <span class="nx">field</span> <span class="o">=</span> <span class="nx">grid</span><span class="p">.</span><span class="nx">getColumns</span><span class="p">()[</span><span class="nx">args</span><span class="p">.</span><span class="nx">cell</span><span class="p">].</span><span class="nx">id</span><span class="p">;</span>
|
|
<span class="kd">var</span> <span class="nx">v</span> <span class="o">=</span> <span class="p">{};</span>
|
|
<span class="nx">v</span><span class="p">[</span><span class="nx">field</span><span class="p">]</span> <span class="o">=</span> <span class="nx">args</span><span class="p">.</span><span class="nx">item</span><span class="p">[</span><span class="nx">field</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">v</span><span class="p">);</span>
|
|
<span class="p">});</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">_slickHandler</span><span class="p">.</span><span class="nx">subscribe</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">grid</span><span class="p">.</span><span class="nx">onClick</span><span class="p">,</span><span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="nx">args</span><span class="p">){</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">cell</span> <span class="o">==</span> <span class="mi">0</span> <span class="o">&&</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="s2">"gridOptions"</span><span class="p">).</span><span class="nx">enabledDelRow</span> <span class="o">==</span> <span class="kc">true</span><span class="p">){</span></pre></div> </td> </tr> <tr id="section-23"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-23">¶</a> </div> <p>We need to delete the associated model</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">model</span> <span class="o">=</span> <span class="nx">data</span><span class="p">.</span><span class="nx">getModel</span><span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">row</span><span class="p">);</span>
|
|
<span class="nx">model</span><span class="p">.</span><span class="nx">destroy</span><span class="p">()</span>
|
|
<span class="p">}</span>
|
|
<span class="p">})</span> <span class="p">;</span>
|
|
|
|
<span class="kd">var</span> <span class="nx">columnpicker</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Slick</span><span class="p">.</span><span class="nx">Controls</span><span class="p">.</span><span class="nx">ColumnPicker</span><span class="p">(</span><span class="nx">columns</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">grid</span><span class="p">,</span>
|
|
<span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">options</span><span class="p">,{</span><span class="nx">state</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="k">if</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">visible</span><span class="p">){</span>
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">grid</span><span class="p">.</span><span class="nx">init</span><span class="p">();</span>
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">rendered</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
|
|
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-24"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-24">¶</a> </div> <p>Defer rendering until the view is visible</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">self</span><span class="p">.</span><span class="nx">rendered</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
|
|
<span class="p">},</span>
|
|
|
|
<span class="nx">remove</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">_slickHandler</span><span class="p">.</span><span class="nx">unsubscribeAll</span><span class="p">();</span>
|
|
<span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">remove</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="nx">arguments</span><span class="p">);</span>
|
|
<span class="p">},</span>
|
|
|
|
<span class="nx">show</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-25"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-25">¶</a> </div> <p>If the div is hidden, SlickGrid will calculate wrongly some
|
|
sizes so we must render it explicitly when the view is visible</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">rendered</span><span class="p">){</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">grid</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="k">this</span><span class="p">.</span><span class="nx">grid</span><span class="p">.</span><span class="nx">init</span><span class="p">();</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">rendered</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">visible</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
|
|
<span class="p">},</span>
|
|
|
|
<span class="nx">hide</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">visible</span> <span class="o">=</span> <span class="kc">false</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>
|
|
|
|
<span class="cm">/*</span>
|
|
<span class="cm">* Context menu for the column picker, adapted from</span>
|
|
<span class="cm">* http://mleibman.github.com/SlickGrid/examples/example-grouping</span>
|
|
<span class="cm">*</span>
|
|
<span class="cm">*/</span>
|
|
<span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">$</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="kd">function</span> <span class="nx">SlickColumnPicker</span><span class="p">(</span><span class="nx">columns</span><span class="p">,</span> <span class="nx">grid</span><span class="p">,</span> <span class="nx">options</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="kd">var</span> <span class="nx">$menu</span><span class="p">;</span>
|
|
<span class="kd">var</span> <span class="nx">columnCheckboxes</span><span class="p">;</span>
|
|
|
|
<span class="kd">var</span> <span class="nx">defaults</span> <span class="o">=</span> <span class="p">{</span>
|
|
<span class="nx">fadeSpeed</span><span class="o">:</span><span class="mi">250</span>
|
|
<span class="p">};</span>
|
|
|
|
<span class="kd">function</span> <span class="nx">init</span><span class="p">()</span> <span class="p">{</span>
|
|
<span class="nx">grid</span><span class="p">.</span><span class="nx">onHeaderContextMenu</span><span class="p">.</span><span class="nx">subscribe</span><span class="p">(</span><span class="nx">handleHeaderContextMenu</span><span class="p">);</span>
|
|
<span class="nx">options</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">defaults</span><span class="p">,</span> <span class="nx">options</span><span class="p">);</span>
|
|
|
|
<span class="nx">$menu</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'<ul class="dropdown-menu slick-contextmenu" style="display:none;position:absolute;z-index:20;" />'</span><span class="p">).</span><span class="nx">appendTo</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">);</span>
|
|
|
|
<span class="nx">$menu</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'mouseleave'</span><span class="p">,</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="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">fadeOut</span><span class="p">(</span><span class="nx">options</span><span class="p">.</span><span class="nx">fadeSpeed</span><span class="p">);</span>
|
|
<span class="p">});</span>
|
|
<span class="nx">$menu</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'click'</span><span class="p">,</span> <span class="nx">updateColumn</span><span class="p">);</span>
|
|
|
|
<span class="p">}</span>
|
|
|
|
<span class="kd">function</span> <span class="nx">handleHeaderContextMenu</span><span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
|
|
<span class="nx">$menu</span><span class="p">.</span><span class="nx">empty</span><span class="p">();</span>
|
|
<span class="nx">columnCheckboxes</span> <span class="o">=</span> <span class="p">[];</span>
|
|
|
|
<span class="kd">var</span> <span class="nx">$li</span><span class="p">,</span> <span class="nx">$input</span><span class="p">;</span>
|
|
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="nx">columns</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">$li</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'<li />'</span><span class="p">).</span><span class="nx">appendTo</span><span class="p">(</span><span class="nx">$menu</span><span class="p">);</span>
|
|
<span class="nx">$input</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'<input type="checkbox" />'</span><span class="p">).</span><span class="nx">data</span><span class="p">(</span><span class="s1">'column-id'</span><span class="p">,</span> <span class="nx">columns</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">id</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'id'</span><span class="p">,</span><span class="s1">'slick-column-vis-'</span><span class="o">+</span><span class="nx">columns</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">id</span><span class="p">);</span>
|
|
<span class="nx">columnCheckboxes</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">$input</span><span class="p">);</span>
|
|
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">grid</span><span class="p">.</span><span class="nx">getColumnIndex</span><span class="p">(</span><span class="nx">columns</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">id</span><span class="p">)</span> <span class="o">!==</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">$input</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'checked'</span><span class="p">,</span> <span class="s1">'checked'</span><span class="p">);</span>
|
|
<span class="p">}</span>
|
|
<span class="nx">$input</span><span class="p">.</span><span class="nx">appendTo</span><span class="p">(</span><span class="nx">$li</span><span class="p">);</span>
|
|
<span class="nx">$</span><span class="p">(</span><span class="s1">'<label />'</span><span class="p">)</span>
|
|
<span class="p">.</span><span class="nx">text</span><span class="p">(</span><span class="nx">columns</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">name</span><span class="p">)</span>
|
|
<span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'for'</span><span class="p">,</span><span class="s1">'slick-column-vis-'</span><span class="o">+</span><span class="nx">columns</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">id</span><span class="p">)</span>
|
|
<span class="p">.</span><span class="nx">appendTo</span><span class="p">(</span><span class="nx">$li</span><span class="p">);</span>
|
|
<span class="p">}</span>
|
|
<span class="nx">$</span><span class="p">(</span><span class="s1">'<li/>'</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s1">'divider'</span><span class="p">).</span><span class="nx">appendTo</span><span class="p">(</span><span class="nx">$menu</span><span class="p">);</span>
|
|
<span class="nx">$li</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'<li />'</span><span class="p">).</span><span class="nx">data</span><span class="p">(</span><span class="s1">'option'</span><span class="p">,</span> <span class="s1">'autoresize'</span><span class="p">).</span><span class="nx">appendTo</span><span class="p">(</span><span class="nx">$menu</span><span class="p">);</span>
|
|
<span class="nx">$input</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'<input type="checkbox" />'</span><span class="p">).</span><span class="nx">data</span><span class="p">(</span><span class="s1">'option'</span><span class="p">,</span> <span class="s1">'autoresize'</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'id'</span><span class="p">,</span><span class="s1">'slick-option-autoresize'</span><span class="p">);</span>
|
|
<span class="nx">$input</span><span class="p">.</span><span class="nx">appendTo</span><span class="p">(</span><span class="nx">$li</span><span class="p">);</span>
|
|
<span class="nx">$</span><span class="p">(</span><span class="s1">'<label />'</span><span class="p">)</span>
|
|
<span class="p">.</span><span class="nx">text</span><span class="p">(</span><span class="s1">'Force fit columns'</span><span class="p">)</span>
|
|
<span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'for'</span><span class="p">,</span><span class="s1">'slick-option-autoresize'</span><span class="p">)</span>
|
|
<span class="p">.</span><span class="nx">appendTo</span><span class="p">(</span><span class="nx">$li</span><span class="p">);</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">grid</span><span class="p">.</span><span class="nx">getOptions</span><span class="p">().</span><span class="nx">forceFitColumns</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">$input</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'checked'</span><span class="p">,</span> <span class="s1">'checked'</span><span class="p">);</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="nx">$menu</span><span class="p">.</span><span class="nx">css</span><span class="p">(</span><span class="s1">'top'</span><span class="p">,</span> <span class="nx">e</span><span class="p">.</span><span class="nx">pageY</span> <span class="o">-</span> <span class="mi">10</span><span class="p">)</span>
|
|
<span class="p">.</span><span class="nx">css</span><span class="p">(</span><span class="s1">'left'</span><span class="p">,</span> <span class="nx">e</span><span class="p">.</span><span class="nx">pageX</span> <span class="o">-</span> <span class="mi">10</span><span class="p">)</span>
|
|
<span class="p">.</span><span class="nx">fadeIn</span><span class="p">(</span><span class="nx">options</span><span class="p">.</span><span class="nx">fadeSpeed</span><span class="p">);</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="kd">function</span> <span class="nx">updateColumn</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">checkbox</span><span class="p">;</span>
|
|
|
|
<span class="k">if</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">'option'</span><span class="p">)</span> <span class="o">===</span> <span class="s1">'autoresize'</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="kd">var</span> <span class="nx">checked</span><span class="p">;</span>
|
|
<span class="k">if</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">is</span><span class="p">(</span><span class="s1">'li'</span><span class="p">)){</span>
|
|
<span class="nx">checkbox</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">find</span><span class="p">(</span><span class="s1">'input'</span><span class="p">).</span><span class="nx">first</span><span class="p">();</span>
|
|
<span class="nx">checked</span> <span class="o">=</span> <span class="o">!</span><span class="nx">checkbox</span><span class="p">.</span><span class="nx">is</span><span class="p">(</span><span class="s1">':checked'</span><span class="p">);</span>
|
|
<span class="nx">checkbox</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'checked'</span><span class="p">,</span><span class="nx">checked</span><span class="p">);</span>
|
|
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
|
<span class="nx">checked</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">checked</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">checked</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">grid</span><span class="p">.</span><span class="nx">setOptions</span><span class="p">({</span><span class="nx">forceFitColumns</span><span class="o">:</span><span class="kc">true</span><span class="p">});</span>
|
|
<span class="nx">grid</span><span class="p">.</span><span class="nx">autosizeColumns</span><span class="p">();</span>
|
|
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
|
<span class="nx">grid</span><span class="p">.</span><span class="nx">setOptions</span><span class="p">({</span><span class="nx">forceFitColumns</span><span class="o">:</span><span class="kc">false</span><span class="p">});</span>
|
|
<span class="p">}</span>
|
|
<span class="nx">options</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">fitColumns</span><span class="o">:</span><span class="nx">checked</span><span class="p">});</span>
|
|
<span class="k">return</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="k">if</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">is</span><span class="p">(</span><span class="s1">'li'</span><span class="p">)</span> <span class="o">&&</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">hasClass</span><span class="p">(</span><span class="s1">'divider'</span><span class="p">))</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">is</span><span class="p">(</span><span class="s1">'input'</span><span class="p">))</span> <span class="p">{</span>
|
|
<span class="k">if</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">is</span><span class="p">(</span><span class="s1">'li'</span><span class="p">)){</span>
|
|
<span class="nx">checkbox</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">find</span><span class="p">(</span><span class="s1">'input'</span><span class="p">).</span><span class="nx">first</span><span class="p">();</span>
|
|
<span class="nx">checkbox</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'checked'</span><span class="p">,</span><span class="o">!</span><span class="nx">checkbox</span><span class="p">.</span><span class="nx">is</span><span class="p">(</span><span class="s1">':checked'</span><span class="p">));</span>
|
|
<span class="p">}</span>
|
|
<span class="kd">var</span> <span class="nx">visibleColumns</span> <span class="o">=</span> <span class="p">[];</span>
|
|
<span class="kd">var</span> <span class="nx">hiddenColumnsIds</span> <span class="o">=</span> <span class="p">[];</span>
|
|
<span class="nx">$</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">columnCheckboxes</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">i</span><span class="p">,</span> <span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">is</span><span class="p">(</span><span class="s1">':checked'</span><span class="p">))</span> <span class="p">{</span>
|
|
<span class="nx">visibleColumns</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">columns</span><span class="p">[</span><span class="nx">i</span><span class="p">]);</span>
|
|
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
|
<span class="nx">hiddenColumnsIds</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">columns</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">id</span><span class="p">);</span>
|
|
<span class="p">}</span>
|
|
<span class="p">});</span>
|
|
|
|
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">visibleColumns</span><span class="p">.</span><span class="nx">length</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">attr</span><span class="p">(</span><span class="s1">'checked'</span><span class="p">,</span> <span class="s1">'checked'</span><span class="p">);</span>
|
|
<span class="k">return</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="nx">grid</span><span class="p">.</span><span class="nx">setColumns</span><span class="p">(</span><span class="nx">visibleColumns</span><span class="p">);</span>
|
|
<span class="nx">options</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">hiddenColumns</span><span class="o">:</span><span class="nx">hiddenColumnsIds</span><span class="p">});</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
<span class="nx">init</span><span class="p">();</span>
|
|
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-26"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-26">¶</a> </div> <p>Slick.Controls.ColumnPicker</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">$</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="kc">true</span><span class="p">,</span> <span class="nb">window</span><span class="p">,</span> <span class="p">{</span> <span class="nx">Slick</span><span class="o">:</span><span class="p">{</span> <span class="nx">Controls</span><span class="o">:</span><span class="p">{</span> <span class="nx">ColumnPicker</span><span class="o">:</span><span class="nx">SlickColumnPicker</span> <span class="p">}}});</span>
|
|
<span class="p">})(</span><span class="nx">jQuery</span><span class="p">);</span>
|
|
|
|
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html> |