jquery easyui DataGrid-白红宇

jquery easyui DataGrid

阅读量：3562 次

发布时间：2019-05-20

本文共 3460 字，大约阅读时间需要 11 分钟。

Easyui Demo网站：

http://www.jeasyui.com/ 英文

http://www.phptogether.com/juidoc/ 中文

datagrip的基本属性方法：http://www.phptogether.com/juidoc/datagrid.html

推荐：http://www.cnblogs.com/Philoo/tag/jQuery/

冻结列（2013-01-17 ）

$('#tbList').datagrid({ pagination: true,            frozenColumns: [[            { field: 'BId',checkbox:'true',width:30},            { field: 'BNo', title: '牌号', width: 100 },            { field: 'FNo', title: '班号', width: 100 }        　　]], 　　　　　　　fitColumns:false　//禁止自适应宽度、可以水平滚动        });

去掉分页(2013-02-20)

$('#tbList').datagrid({pagination: true});

更改为

$('#tbList').datagrid();

或

$('#tbList').datagrid({pagination: false});

注意：同时需要设置table的高度，而且不能为auto

复选框以及单选（2013-02-20）

变为单选（添加singleSelect="true" ）

加载数据后默认全选：

$(document).ready(function () {        $('#tbList').datagrid({             onLoadSuccess: function (data) {                $('#tbList').datagrid('selectAll');            }         });

获取行数（2013-02-20）

$('#tbList').datagrid("getRows").length;

隐藏列（2013-02-20）

清空原有数据（2013-02-20）

方法1：

var item = $('#filegrid').datagrid('getRows');
if (item) {

for (var i = item.length - 1; i >= 0; i--) {

                    var index = $('#filegrid').datagrid('getRowIndex', item[i]);
                    $('#filegrid').datagrid('deleteRow', index);
                }
            }

方法2：(测试过)

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

解析：loadData：载入本地数据，旧记录将被移除。

事件(2013-02-20):

$('#tbList').datagrid({ onClickRow: function () {//代码 } });

datagrip单击行的时候，将单选按钮设置为选中（2013-02-20）：

table中td的时间格式问题（2013-03-14）

1.页面

2.js

var Common = {    //EasyUI用DataGrid用日期格式化    TimeFormatter: function (value, rec, index) {        if (value == undefined) {            return "";        }        /*json格式时间转js时间格式*/        value = value.substr(1, value.length - 2);        var obj = eval('(' + "{Date: new " + value + "}" + ')');        var dateValue = obj["Date"];        if (dateValue.getFullYear() < 1900) {            return "";        }        var val = dateValue.format("yyyy-mm-dd HH:MM");//控制格式        return val.substr(11, 5);    }};

table中td内容太长自动换行（2013-03-18）

　添加属性　nowrap="false"

行和复选框的分离（2013-03-25）

checkOnSelect="false" selectOnCheck="false"

注意：当使用$("#tbList").datagrid("getSelections");时候，只有行被选中，才能取到该行。一般情况，选中行时候，行为黄色背景。

eg.<table checkOnSelect="false"> </table>

var selected = $("#tbList").datagrid("getSelections");        if (selected.length == 0) {            alert("请选择！");            return;        }        var idString = "";        $.each(selected, function (index, item) {            idString += item.Id + ",";        });

设置数据列表的样式

$(document).ready(function () {        //呈现列表数据        $('#tbList').datagrid({ pagination: true,            rowStyler: function(index,row){                    if (row.ID< 10) {
    //那么数据的id字段小于10的，将显示为灰色字体                        return 'color:#999;';//和一般的样式写法一样                    }                }            });    });

from http://www.cnblogs.com/xcsn/archive/2013/01/17/2864157.html

你可能感兴趣的文章