3.01-EasyUI之datagrid

一、實現表格加載後變色：

      方法一：

function onLoadSuccess(data) {
   $.each(data.rows,function (index,row) {
      $("[datagrid-row-index='" + index + "']").css({ "color": "red" });
   });
}

      方法二：

$('#dg').datagrid({
	rowStyler: function(index,row){
		if (row.listprice>80){
			return 'background-color:#6293BB;color:#fff;';
		}
	}
});

 二、獲取某一行的數據：

var row = $('#tableId').datagrid('getData').rows[index];//獲取某一行的數據

var row=$("#tableId").datagrid('getSelected');//獲取選中的行

var rows = $("#tableId").datagrid("getRows");//獲取全部行的數據

 三、datagrid表格前端分頁：

<div data-options="region:'center'">
    <table id="userTable" class="easyui-datagrid" style="width:100%;height:715px"
           data-options="pagination:true,url:'user/findUsers',rownumbers:true,pageSize:30,pageList:[20,30,50],fitColumns:true,singleSelect:true">
        <thead>
        <tr>
            <th data-options="field:'id',checkbox:true"></th>
            <th data-options="field:'opt',width:100,align:'center',formatter:optFormat">操做</th>
            <th data-options="field:'username',width:150,align:'center'">用戶名</th>
            <th data-options="field:'phone',width:150,align:'center'">手機號</th>
            <th data-options="field:'gender',width:150,align:'center'">性別</th>
            <th data-options="field:'created',width:150,align:'center'">建立時間</th>
            <th data-options="field:'updated',width:150,align:'center'">更新時間</th>
            <th data-options="field:'typeStr',width:160,align:'center'">用戶類型</th>
        </tr>
        </thead>
    </table>
</div>


<script>
    (function ($) {
        function pagerFilter(data) {
            if ($.isArray(data)) {	// is array
                data = {
                    total: data.length,
                    rows: data
                }
            }
            var target = this;
            var dg = $(target);
            var state = dg.data('datagrid');
            var opts = dg.datagrid('options');
            if (!state.allRows) {
                state.allRows = (data.rows);
            }
            if (!opts.remoteSort && opts.sortName) {
                var names = opts.sortName.split(',');
                var orders = opts.sortOrder.split(',');
                state.allRows.sort(function (r1, r2) {
                    var r = 0;
                    for (var i = 0; i < names.length; i++) {
                        var sn = names[i];
                        var so = orders[i];
                        var col = $(target).datagrid('getColumnOption', sn);
                        var sortFunc = col.sorter || function (a, b) {
                            return a == b ? 0 : (a > b ? 1 : -1);
                        };
                        r = sortFunc(r1[sn], r2[sn]) * (so == 'asc' ? 1 : -1);
                        if (r != 0) {
                            return r;
                        }
                    }
                    return r;
                });
            }
            var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
            var end = start + parseInt(opts.pageSize);
            data.rows = state.allRows.slice(start, end);
            return data;
        }

        var loadDataMethod = $.fn.datagrid.methods.loadData;
        var deleteRowMethod = $.fn.datagrid.methods.deleteRow;
        $.extend($.fn.datagrid.methods, {
            clientPaging: function (jq) {
                return jq.each(function () {
                    var dg = $(this);
                    var state = dg.data('datagrid');
                    var opts = state.options;
                    opts.loadFilter = pagerFilter;
                    var onBeforeLoad = opts.onBeforeLoad;
                    opts.onBeforeLoad = function (param) {
                        state.allRows = null;
                        return onBeforeLoad.call(this, param);
                    }
                    var pager = dg.datagrid('getPager');
                    pager.pagination({
                        onSelectPage: function (pageNum, pageSize) {
                            opts.pageNumber = pageNum;
                            opts.pageSize = pageSize;
                            pager.pagination('refresh', {
                                pageNumber: pageNum,
                                pageSize: pageSize
                            });
                            dg.datagrid('loadData', state.allRows);
                        }
                    });
                    $(this).datagrid('loadData', state.data);
                    if (opts.url) {
                        $(this).datagrid('reload');
                    }
                });
            },
            loadData: function (jq, data) {
                jq.each(function () {
                    $(this).data('datagrid').allRows = null;
                });
                return loadDataMethod.call($.fn.datagrid.methods, jq, data);
            },
            deleteRow: function (jq, index) {
                return jq.each(function () {
                    var row = $(this).datagrid('getRows')[index];
                    deleteRowMethod.call($.fn.datagrid.methods, $(this), index);
                    var state = $(this).data('datagrid');
                    if (state.options.loadFilter == pagerFilter) {
                        for (var i = 0; i < state.allRows.length; i++) {
                            if (state.allRows[i] == row) {
                                state.allRows.splice(i, 1);
                                break;
                            }
                        }
                        $(this).datagrid('loadData', state.allRows);
                    }
                });
            },
            getAllRows: function (jq) {
                return jq.data('datagrid').allRows;
            }
        })
    })(jQuery);

    function getData() {
        var rows = [];
        for (var i = 1; i <= 800; i++) {
            var amount = Math.floor(Math.random() * 1000);
            var price = Math.floor(Math.random() * 1000);
            rows.push({
                inv: 'Inv No ' + i,
                date: $.fn.datebox.defaults.formatter(new Date()),
                name: 'Name ' + i,
                amount: amount,
                price: price,
                cost: amount * price,
                note: 'Note ' + i
            });
        }
        return rows;
    }

    $(function () {
        $('#userTable').datagrid({data: getData()}).datagrid('clientPaging');
    });

</script>