SlickGrid
copy/paste issue
HTML
<script src="https://cdn.rawgit.com/Celebio/SlickGrid/master/lib/jquery.event.drag-2.2.js"></script>
<script src="https://cdn.rawgit.com/Celebio/SlickGrid/master/slick.core.js"></script>
<script src="https://cdn.rawgit.com/Celebio/SlickGrid/master/slick.grid.js"></script>
<script src="https://cdn.rawgit.com/Celebio/SlickGrid/master/slick.dataview.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/Celebio/SlickGrid/master/slick.grid.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/Celebio/SlickGrid/master/slick-default-theme.css">
<div id="tardis" style="position:absolute; visibility:hidden">
<div id="tmpl-smartee">
<svg viewBox="0 0 400 400" preserveAspectRatio="xMidYMid meet">
<title>smarteee</title>
<defs>
<radialGradient cx="25%" cy="25%" r="100%" fx="40%" fy="40%"></radialGradient>
</defs>
<circle class="face" cx="200" cy="200" r="195" />
<ellipse class="eye eye-left" cx="140" cy="150" rx="10" ry="40" fill="black"/>
<ellipse class="eye eye-right" cx="260" cy="150" rx="10" ry="40" fill="black"/>
<path class="smile" stroke-width="10" stroke="black" fill="none" stroke-linecap="round"/>
</svg>
</div>
</div>
<div id="settings-ex-filter" class="settings-filter-ctr">
<table>
<tr>
<td><span>Filter Min</span></td>
<td><input type='number' min='0' max='100' value='0'/></td>
<td><input type="range" min="0" max="100" value='0'/></td>
</tr>
<tr>
<td><span>Filter Max</span></td>
<td><input type='number' min='0' max='100' value='100'/></td>
<td><input type="range" min="0" max="100" value='100'/>
</td>
</tr>
</table>
</div>
<div id="oh-my-griddy-aunt"></div>
CSS
::-webkit-scrollbar
{
width: 12px;
background-color: #B9BACC;
}
::-webkit-scrollbar-track
{
color: #fff;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb
{
color: #96A9BB;
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
body
{
font-family: Arial, Helvetica, sans-serif;
background-color: #131313;
position: absolute;
top: 5px;
bottom: 5px;
left: 5px;
right: 5px;
}
.settings-filter-ctr
{
margin: 0 auto;
border: 1px solid #19264E;
font-size: 12px;
width: 300px;
background-color: rgba(22, 22, 128, 0.1);
}
.settings-filter-ctr table {margin:0 auto;}
.settings-filter-ctr tr {height:40px;}
.settings-filter-ctr td span {width:60px; padding-right:5px; color:#2595FD;}
.settings-filter-ctr td input[type=range] {vertical-align:middle; width:100px;}
.settings-filter-ctr td input[type=number] {width:50px;}
#oh-my-griddy-aunt
{
position: absolute;
top: 93px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
font-size: 12px;
background-color: #ECEEE9;
}
.toggle
{
height: 16px;
width: 16px;
display: inline-block;
}
.toggle.expand
{
background: url(http://tinyurl.com/k9ejb3a/expand.gif) no-repeat center center;
}
.toggle.collapse
{
background: url(http://tinyurl.com/k9ejb3a/collapse.gif) no-repeat center center;
}
/*--- generic slickgrid padding pollyfill ----------------------*/
.dynamic-row
{
padding-bottom: 1px !important;
}
.slick-cell.active
{
border-color: transparent;
border-right: 1px dotted...
JavaScript
////////////////////////////////////////////////////////////////////////////////
//example codez re trying to create a grid with rows of dynamic height to
//cater for folks that wanna bung loads of stuff in a field & see it all...
//by [email protected] ~ visit: www.violet313.org/slickgrids
//have all the fun with it ;) vxx.
////////////////////////////////////////////////////////////////////////////////
modSlickgridFilter=(
function()
{
var _dataView=null;
var _grid=null;
var _data=[];
var _attribs= //lets make a start on abstracting out all the DOM attribute literals
{
//ours
grid: "oh-my-griddy-aunt",
tardis: "tardis", //for templates & hiding stuff.
detailField: "pcComplete",
//ours, for styling away UI side-efects etc
toggle: "toggle",
cell: "dynamic-cell",
cellDetail: "dynamic-cell-detail",
row: "dynamic-row",
rowYin: "dynamic-row-yin",
rowYang: "dynamic-row-yang",
rowParent: "dynamic-row-parent",
rowPadding: "dynamic-row-padding",
rowPaddingLast: "dynamic-row-padding-last",
rowPaddingInner: "dynamic-row-padding-inner",
};
_attribs.idSelector=function(k) {return "#"+this[k]};
//////////////////////////////////////////////////////////////
//always reference columns by name so user can move 'em around
//////////////////////////////////////////////////////////////
var getIdxDetailCol=function(){return _grid.getColumnIndex(_attribs.detailField);}
var getKeyDynoCellStyle=function(row)
{
return _attribs.cell+"."+_attribs.detailField+"."+row;
}
//////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////
var getPaddingItem=function(parent , offset)
{
var...