easyui的datagrid中一些用法

1.datagrid将表格设为select选择列表和时间选择器

$('#dg').datagrid({
            title:'Editable DataGrid',
            iconCls:'icon-edit',
            width:660,
            height:250,
            singleSelect:true,
            idField:'itemid',
            data:data,
            columns:[[{field:'productid',title:'Product',width:100,
                            formatter:function(value,row){
                                return row.name || value;
                            },
                            editor:{
                                type:'combobox',
                                options:{
                                    valueField:'productid',
                                    textField:'name',
                                    data:products,
                                    required:true,
                                    onChange:function(n,o){

                                    }
                                }
                            }
                        },
                   {field:'cCreatetime',title:'退货时间',align:'center',width:20,
                      formatter:formatDateBoxFull,//格式化时间
                      editor:{type : 'datetimebox',options : {
                        valueField:'cCreatetime',
                        showSeconds:false,
                        required : true
                         }}}
                    ]]
});//datagrid---end

/**
 * 时间处理扩展
 */
$.extend($.fn.datagrid.defaults.editors, {
    datetimebox: {// datetimebox就是你要自定义editor的名称
        init: function (container, options) {
            var input = $('<input class="easyuidatetimebox">').appendTo(container);
            return input.datetimebox({
                formatter: function (date) {
                    return new Date(date).format("yyyy-MM-dd hh:mm:ss");
                }
            });
        },
        getValue: function (target) {
            return $(target).parent().find('input.combo-value').val();
        },
        setValue: function (target, value) {
            $(target).datetimebox("setValue", value);
        },
        resize: function (target, width) {
            var input = $(target);
            if ($.boxModel == true) {
                input.width(width - (input.outerWidth() - input.width()));
            } else {
                input.width(width);
            }
        }
    }
});

function parseToDate(value) {
    if (value == null || value == '') {
        return undefined;
    }
    var dt;
    if (value instanceof Date) {
        dt = value;
    } else {
        if (!isNaN(value)) {
            dt = new Date(value);
        } else if (value.indexOf('/Date') > -1) {
            value = value.replace(/\/Date\((-?\d+)\)\//, '$1');
            dt = new Date();
            dt.setTime(value);
        } else if (value.indexOf('/') > -1) {
            dt = new Date(Date.parse(value.replace(/-/g, '/')));
        } else {
            dt = new Date(value);
        }
    }
    return dt;
}
// 为Date类型拓展一个format方法，用于格式化日期
Date.prototype.format = function(format)
{
    var o = {
        "M+" : this.getMonth() + 1, // month
        "d+" : this.getDate(), // day
        "h+" : this.getHours(), // hour
        "m+" : this.getMinutes(), // minute
        "s+" : this.getSeconds(), // second
        "q+" : Math.floor((this.getMonth() + 3) / 3), // quarter
        "S" : this.getMilliseconds()
    // millisecond
    };
    if (/(y+)/.test(format))
        format = format.replace(RegExp.$1, (this.getFullYear() + "")
                .substr(4 - RegExp.$1.length));
    for ( var k in o)
        if (new RegExp("(" + k + ")").test(format))
            format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k]
                    : ("00" + o[k]).substr(("" + o[k]).length));
    return format;
};
/* 带时间 */
function formatDateBoxFull(value) {
    if (value == null || value == '') {
        return '';
    }
    var dt = parseToDate(value);
    return dt.format("yyyy-MM-dd hh:mm:ss");
}
$.extend($.fn.validatebox.defaults.rules, {
    /*13:04:06*/
    time: {
        validator: function (value) {
            var a = value.match(/^(\d{1,2})(:)?(\d{1,2})\2(\d{1,2})$/);
            if (a == null) {
                return false;
            } else if (a[1] > 24 || a[3] > 60 || a[4] > 60) {
                return false;
            }
        },
        message: '时间格式不正确，请重新输入。'
    },
    /*2014-01-01*/
    date: {
        validator: function (value) {
            var r = value.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
            if (r == null) {
                return false;
            }
            var d = new Date(r[1], r[3] - 1, r[4]);
            return (d.getFullYear() == r[1] && (d.getMonth() + 1) == r[3] && d.getDate() == r[4]);
        },
        message: '时间格式不正确，请重新输入。'
    },
    /*2014-01-01 13:04:06*/
    datetime: {
        validator: function (value) {
            var r = value.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/);
            if (r == null) return false;
            var d = new Date(r[1], r[3] - 1, r[4], r[5], r[6], r[7]);
            return (d.getFullYear() == r[1] && (d.getMonth() + 1) == r[3] && d.getDate() == r[4] && d.getHours() == r[5] && d.getMinutes() == r[6] && d.getSeconds() == r[7]);
        },
        message: '时间格式不正确，请重新输入。'
    }
});
//时间处理扩展---end       

其中onChange事件中n为当前选择的值，o为上一个选择的值，formatter在首次加载时显示的值。

2.获取数据

var row = $('#dg').datagrid('getSelected');//获取当前选择行的数据
var rows = $('#dg').datagrid('getSelections');//获取所有选中行的数据
var rows = $("#dg").datagrid("getRows");//获取所有行数据
//获取行中间某列数据
ar rows = $('#dg'').datagrid('getRows');
    for (var i = 0; i < rows.length; i++) { 
    alert(rows[i]['SCORE']); //获取指定列 
}

3.其他方法

1.获取选择行的行号

  var row = $('#dg').datagrid('getSelected');
  var index = $('#dg').datagrid('getRowIndex',row);//获取行号

2.选择某行

$('#dg').datagrid('selectRow',index);

3.刷新某行

$('#dg').datagrid('refreshRow', index);

4.更新某行

$('#dg').datagrid('updateRow', 
{
    index,
    row: {
            name: '新名称',
            note: '新消息'
        }
}
);

5.删除某行

$('#dg').datagrid('deleteRow', index);

6.编辑某行（带editor属性的列会变为编辑状态）

$('#dg').datagrid('beginEdit',index);

7.结束编辑某行（取消编辑状态）

$('#dg').datagrid('endEdit',index);

8.清楚表格所有数据

$('#dg').datagrid('loadData', { total: 0, rows: [] });