easyui-dataGrid

接着上篇combobox，表格控件无处不在，easyui也不例外，提供及其丰富的展现形式，这里我仅对最常用的几种方式记录下，以便在以后使用的时候可以节省点时间找资料。先来张图：

上面的图片就是我们最常用的几种情况，当然自己写样式和JS来做完全可以实现，控制起来也更自如。我是懒人，能懒则懒，也就顺带的看了下datagrid的使用方式：

分页的情况：

  <table id="dg2" class="easyui-datagrid" title="分页" style=" 500px; height: 250px">
            <thead>
                <tr>
                    <th data-options="field:'ck',checkbox:true">
                    </th>
                    <th data-options="field:'CurrPrice',90,align:'right',formatter:formatPrice">
                        当前价
                    </th>
                    <th data-options="field:'Mileage',90,align:'right'">
                        里程
                    </th>
                    <th data-options="field:'StartPrice',240">
                        起拍价
                    </th>
                    <th data-options="field:'CityName',120">
                        城市
                    </th>
                    <th data-options="field:'CarInfo',100">
                        车辆信息
                    </th>
                </tr>
            </thead>
        </table>
        <a href="javascript:void(0)" onclick="ShowValues2()">获取选中行</a>

对应的JS：

  $('#dg2').datagrid({
            rownumbers: false
            , singleSelect: true
            , border: true
            , pagination: true 
            , collapsible: false
            , remoteSort: false
            , onLoadSuccess: function (row) {
                var rowData = row.rows;
                $.each(rowData, function (idx, val) {
                    if (val.CarInfo == "雪佛兰00003") {
                        $("#dg2").datagrid("selectRow", idx); //如果数据行为已选中则选中改行
                    }
                });
            }
        }
        );

        $('#dg2').datagrid('getPager').pagination({
            onSelectPage: function (pageNumber, pageSize) {
                getData(pageNumber, 10);
            }
        });

 function getData(pageNumber, pageSize) {
        var url = "/Common/GetData2";
        var data = { pageIndex: pageNumber };//仅作展示，参数可以自己来组织
        $.post(url, data, function (response) {
            $('#dg2').datagrid('loadData', response);
            var p = $('#dg2').datagrid('getPager');
            $(p).pagination({
                displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',
                total: 120, //总数  
                pageSize: pageSize, //行数  
                pageNumber: pageNumber//页数 
                , layout: ['sep', 'first', 'prev', 'links', 'next', 'last', 'sep', 'refresh']
            });

        });
    }
    getData(1, 10)

排序的情况，html脚本基本相似，这里就贴下js

 $('#dg2').datagrid({
            rownumbers: false
            , singleSelect: true
            , border: true
            , pagination: true
            , collapsible: false
            , remoteSort: true
            , sortOrder: "asc"             
            , onLoadSuccess: function (row) {

            }
            , onSortColumn: function (sort, order) {//点击排序时触发事件
                getData3(1, 10);
                alert(sort + "|||" + order)
            }
        }
        );

        $('#dg2').datagrid('getPager').pagination({
            onSelectPage: function (pageNumber, pageSize) {
                getData(pageNumber, 10);
            }
        });

其余相关的js

 //获取用户选中的项目  
 function ShowValues() {
        var names = [];
        var checkedItems = $('#dg2').datagrid('getChecked');
        $.each(checkedItems, function (index, item) {
            names.push(item.CarInfo);
        });
        if (names.length > 0) {
            alert(names[0])
        }
    }

    function formatPrice(val, row, inex) {
        if (val > 300) {
            return '<span style="color:red;">(' + val + ')</span>';
        } else {
            return val;
        }
    }