首页 > 代码库 > Jquery Easy UI--datagrid的使用(转)

Jquery Easy UI--datagrid的使用(转)

 

第一篇学的是做一个管理的外框,接着就是数据datagrid绑定了,这里我用asp.net mvc3来做的,主要就是熟悉属性、方法。

打开easyui的demo 就可以看到如下一段代码:

和上篇一样class="easyui-datagrid", data-options="...",这是一样的,其他我在网上查了查,并做了整理

DataGrid 属性

参数名类型描述默认值
titlestringDatagrid面板的标题null
iconClsstring在面板上通过一个CSS类显示16x16图标。null
borderboolean设置面板是否具有边框TRUE
widthnumberdatagrid面板的宽度auto
heightnumberdatagrid面板的高度auto
columnsarrayDataGrid列配置对象null
frozenColumnsarray冻结的列,被现实在左边null
stripedboolean设置是否让单元格显示条纹。默认false。FALSE
methodstring通过该方法类型请求远程数据。默认post。post
nowrapboolean是否包裹数据,默认为包裹数据显示在一行TRUE
idFieldstring标识字段,或者说主键字段null
urlstring请求数据的URL.(josn格式)null
loadMsgstring加载数据时显示的信息Processing, please wait …
paginationboolean是否显示分页工具栏FALSE
rownumbersboolean是否显示行号FALSE
singleSelectboolean是否单行选定FALSE
fitboolean是否自动适应父容器FALSE
pageNumbernumber分页初始化行号1
pageSizenumber初始化分页大小10
pageListarray分页大小选择列[10,20,30,40,50]
queryParamsobject请求数据时额外发送的参数{}
sortNamestring排序列null
sortOrderstring升序还是降序 ‘asc‘ 或者 ‘desc‘.asc
toolbarstring工具栏(绑定新增,查询按钮...)null

Column 属性

名称类型描述默认值
titlestring列字段要现实的名称undefined
fieldstring列字段undefined
widthnumber宽度undefined
rowspannumber单元格行数undefined
colspannumber单元格列数undefined
alignstring文本对齐方式,同align属性.undefined
sortableboolean是否可以被排序.undefined
checkboxboolean是否具有多选框undefined
formatterclass方法 
注:formatter:function (value, rowData, rowIndex){}
//value 这个field绑定的值   rowData 这行数据内容  rowIndex 选择行的行号

columns: [[
    { field: ‘Id‘, title: ‘编号‘, width: 100, sortable: true },
    { field: ‘ClassName‘, title: ‘类型名称‘, width: 150, sortable: true },
    { field: ‘ClassDescribe‘, title: ‘描述‘, width: 150, sortable: true },
    { field: ‘Id‘, title: ‘操作‘, width: 150, sortable: true, formatter: formatOper 
 
function formatOper(index) {
     return "<a href=http://www.mamicode.com/"javascript:void(0)\"  onclick=\"UsDelete(" + index + ")\">删除</a>"; 
}

Events(事件)


NameParametersDescription
onLoadSuccess none调用远程数据成功是激活
onLoadErrornone装载错误时激活
onClickRowrowIndex , rowData 点击一行时激活,参数包括:
rowIndex:点击的行数,从0开始
rowData: 当前行的数据
onDblClickRowrowIndex ,rowData双击一行是触发,参数包括:
rowIndex:点击的行数,从0开始
rowData: 当前行的数据
onSortColumnsort,order对一列进行排序时激活,参数包括:
sort:排序字段名称
order: 排序规则,升序,降序
onSelectrowIndex,rowData选中一行时激活,参数有:
rowIndex:选中的行数
rowData: 数据
onUnselectrowIndex,rowData取消选中时激活,参数:
rowIndex:选中的行数
rowData: 数据
onDblClickRow: function (rowIndex, rowData) { //双击事件
 
}

Methods(方法)

NameParameterDescription
optionsnone返回所有属性
resizenone重置大小布局
reloadnone重新加载数据
fixColumnSizenone调整列的大小
loadDataparam装载数据,以前的数据会被移除
getSelectednone返回选中的行,没有则返回空
getSelectionsnone返回所有的行,空则返回空数组
clearSelections none取消所有选中
selectRowindex选中一行,参数为行号
selectRecordidValue根据主键查询出一条记录
unselectRowindex取消选中一行
刷新datagird的两种方法:
1.grid.datagrid(‘reload‘);
2.grid.datagrid({ url:‘/Admin/SeachProductTypeInfo?Id=‘+ 6});//带参数查询(刷新datagrid数据)
 
代码如下:
<div id="grid" class="easyui-grid" ></div><div id="EditDig" class="easyui-dialog" title="用户修改" style="width:400px;height:350px;" closed="true"  id="EditForm">    <div id="info" closed="true" class="easyui-window"></div>    </div><script type="text/javascript">    $(function () {        $("#grid").datagrid({            title: "用户列表",            iconCls: icon-save,            methord: get,            url: "/CrmUser/GetUserList/",            sortName: Id,            sortOrder: desc,            idField: Id,            border: true,            width: 1000,            height: 300,            columns: [[                { field: "LoginEmail", title: "登陆邮箱", sortable: true, width: 100 },                { field: "PassWord", title: "密码", sortable: true, width: 100 },                { field: "TrueName", title: "真实姓名", sortable: true, width: 100 },                { field: "Phone", title: "手机号码", sortable: true, width: 100 },                { field: "UserCard", title: "身份证", sortable: true, width: 100 },                { field: "NickName", title: "昵称", sortable: true, width: 100 },                { field: "QQ", title: "QQ号码", sortable: true, width: 100},                { field: "LastLoginTime", title: "最后登陆时间", sortable: true, width: 100, formatter: formatDatebox },                { field: "CreateOn", title: "创建时间", sortable: true, width: 100, formatter: formatDatebox },                { field: "UpdateBy", title: "修改人", sortable: true, width: 100 },                { field: "UpdateOn", title: "修改时间", sortable: true, width: 100, formatter: formatDatebox },                { field: Id, title: 操作, width: 100, align: center, formatter: function (value,rowIndex) {                    var s = <a href="http://www.mamicode.com/#" onclick="view(\‘ + value + \‘)">查看</a> ;                    var e = <a href="http://www.mamicode.com/#" onclick="edit(\‘ + value + \‘)">编辑</a> ;                    var d = <a href="http://www.mamicode.com/#" onclick="del(\‘ + value + \‘)">删除</a> ;                    return s + e + d;                }                }            ]],            //  frozenColumns: [[            //      { field: "CreatorId",title:"创建人ID",sortable:true,width:100 }            //  ]],            toolbar: [{                text: 新增,                iconCls: icon-add,                handler: edit            }, -, {                text: 用户名:&nbsp;<input type="text" id="username" style="height:18px; width: 100px;line-height: 18px; "/>            }, -, {                text: 邮件:&nbsp;<input type="text" id="email" style="height:18px; width: 100px;line-height: 18px; "/>            }, -, {                text: 查找,                iconCls: icon-search,                handler: search            }],            pagination: true,            fit: true,            fitColumns: true,            singleSelect: true        });    });    //查询    function search() {        $("#grid").datagrid({            url: "/CrmUser/GetUserList/?userName="+$("#username").val()+"&email="+$("#email").val(),        });    }    //查看    function view(pId) {    }    //修改    function edit(pId) {    }    //删除    function del(pId) {    }    //做时间转换    function formatDatebox(value) {        if (value =http://www.mamicode.com/= null || value =http://www.mamicode.com/= ‘‘) {            return ‘‘;        }        var dt;        if (value instanceof Date) {            dt = value;        }        else {            dt = new Date(value);            if (isNaN(dt)) {                value = value.replace(/\/Date\((-?\d+)\)\//, ‘$1‘); //标红的这段是关键代码,将那个长字符串的日期值转换成正常的JS日期格式                dt = new Date();                dt.setTime(value);            }        }        return dt.format("yyyy-MM-dd");   //这里用到一个javascript的Date类型的拓展方法,这个是自己添加的拓展方法,在后面的步骤3定义    }    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 d_close() {        $(#EditDig).dialog(close);    };</script>

 

Jquery Easy UI--datagrid的使用(转)