Frozen Cells

by Konstantin Heinrich

HTML

<script src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<table id="tt" title="Frozen Columns" class="easyui-datagrid" style="width:300px;height:250px" data-options="fitColumns: false,singleSelect: true">
    <thead frozen="true">
        <tr>
            <th field="itemid"></th>
            <th field="productid"></th>
        </tr>
    </thead>
    <thead>
        <tr>
            <th field="listprice"></th>
            <th field="unitcost"></th>
            <th field="attr1"></th>
            <th field="status"></th>
            <th field="36"></th>
            <th field="37"></th>
            <th field="38"></th>
            <th field="39"></th>
            <th field="40"></th>
            <th field="41"></th>
            <th field="42"></th>
            <th field="43"></th>
            <th field="44"></th>
            <th field="45"></th>
        </tr>
    </thead>
</table>

JavaScript

// Data for Grid
var data = [{
    productid: "Rot",
    unitcost: 5,
    status: 1,
    listprice: 2,
    attr1: 1,
    itemid: "102"
}, {
    productid: "Blau",
    unitcost: 2,
    status: 3,
    listprice: 4,
    attr1: 2,
    itemid: "EST-10"
}, {
    productid: "Gelb",
    unitcost: 13,
    status: 111,
    listprice: 41,
    attr1: 2,
    itemid: "EST-10"
}, {
    productid: "Grün",
    unitcost: 32,
    status: 1,
    listprice: 3,
    attr1: 321,
    itemid: "EST-10"
}, {
    productid: "Rot",
    unitcost: 23,
    status: 32,
    listprice: 1,
    attr1: 3,
    itemid: "104"
}, {
    productid: "Blau",
    unitcost: 6,
    status: 4,
    listprice: 70,
    attr1: 234,
    itemid: "EST-10"
}, {
    productid: "Gelb",
    unitcost: 234,
    status: 2,
    listprice: 234,
    attr1: 1,
    itemid: "EST-10"
}, {
    productid: "Grün",
    unitcost: 23,
    status: 26,
    listprice: 0,
    attr1: 3,
    itemid: "EST-10"
}, {
    productid: "Rot",
    unitcost: 1,
    status: 2,
    listprice: 3,
    attr1: 5,
    36: 1,
    itemid: "105"
},







];

//Data grid frozen columns
$('#tt').datagrid({
    title: 'R1004',
    width: 500,
    data: data,
    height: 250,

    frozenColumns: [
        [{
            field: 'itemid',
            title: 'Filiale',
            width: 80
        }, {
            field: 'productid',
            title: 'Farbe',
            width: 80
        }, ]
    ],
    columns: [
        [{
            field: 'listprice',
            title: '30',
            width: 40,
            align: 'right',
            styler: function(value,row,index){
				if (value < 20){
					return 'color:red;';
				}
                else{
                    return 'color:green;';
                }
			}
        }, {
            field: 'unitcost',
            title: '32',
            width: 40,
            align: 'right',
            styler: function(value,row,index){
				if (value < 20){
					return 'color:red;';
				}
			}
        }, {
            field:...