EasyUI

绑定数据源

datagrid绑定数据源，一般都是使用远程的http服务地址，返回的格式为JSON，在url属性中指定。
示例代码：

$(function(){
    //初始化表头
    $("#dg").datagrid({
        method:'post',
        url:"/listdata",
        pagination:true,
        pageSize:25,
        height:'auto',
        pageList:[15,25,50,100,200,500],
        striped:true,
        fitColumns:true,
        allowCellWrap:true,
        nowrap:false,
        remoteSort: true,
        columns:[[
            {field:'id',hidden:true},
            {field:'cb',checkbox:true},
            {field:'userId',title:'userId',width:70},
            {field:'userName',title:'用户名',width:80},
            {field:'phoneNumber',title:'phone',width:90},
            {field:'emailAddress',title:'e-mail',width:90},
            {field:'created',title:'created',width:100,align:'center',halign:'center'},
            {field:'examineStatus',title:'操作',formatter:fmtAction,width:120,align:'center',halign:'center'}
        ]],
        onLoadSuccess: function (data) {
          //绑定成功后做一些事情
        }
    });
});

格式化列

一般格式化列多用于操作按钮列、图标列，格式化是在前端完成的。
格式化函数参数说明：

v:代表当前列的值
r:代表当前行对象，可以用r.其他列名，来获取其它列的值。

示例代码：

//格式化列
function fmtAction(v,r) {
    var editBtn = "<a href=javascript:alert('编辑"+r.id+"') >Edit</a>";
    var deleteBtn = "<a href=javascript:alert('删除"+r.id+"') >Delete</a>";
    return editBtn+" | "+deleteBtn;
}

行数据的获取

获取选中列的列值：

//获取选中行
function getCheckRecord() {
    var ids = "";
    var dg=$("#dg");
    var rows = dg.datagrid('getSelections');
    if (rows.length<1){
        alert("请您至少选择一个文件!");
        return false;
    }

    $.each(rows, function (i, row){
        if(ids==""){
            ids=row.userId;
        }else{
            ids+=","+row.userId;
        }
    });
    alert(ids);
}

获取当前页，所有列值：

//获取表格所有值
function getAllValue(){
    var rows = $("#dg").datagrid('getRows');
    var arrayObj = new Array();
    $.each(rows, function (i, row) {
        var val=eval("row.userId"); //列名称
        arrayObj.push(val);
    });
    alert(arrayObj);
}

效果截图

作者： Zealon
崇尚简单，一切简单自然的事物都是美好的。