`
starbhhc
  • 浏览: 654094 次
  • 性别: Icon_minigender_2
  • 来自: 深圳
社区版块
存档分类
最新评论

jquery easyui DataGrid

 
阅读更多

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 )

 

editable datagrid怎样获取所有修改后的数据

 

var rows = $('#tt').datagrid('getChanges', 'updated');    // get the updated rows only

复制代码
$('#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)

复制代码
<table id="tbList" style="height: 330px;" striped="true" rownumbers="true" fitColumns="true" title="" iconcls="icon-edit" 
checkbox="true" idfield="Id" url="@Url.Action("ListData")"> <thead> <tr>   <th field="Id" checkbox="true" width="150">   </th>
    </tr> </thead> </table>
复制代码

变为单选(添加singleSelect="true"  )

<table id="tbList" style="height: 330px;" striped="true" rownumbers="true" fitColumns="true" title="" iconcls="icon-edit" singleSelect="true" checkbox="true"  idfield="Id" url="@Url.Action("ListData")">

加载数据后默认全选:

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

获取行数(2013-02-20)

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

隐藏列(2013-02-20)

<th field="Dept" width="100" hidden="true">名称</th>

 清空原有数据(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):

复制代码
<script type="text/javascript">
    var List = {};
    List.RadioFormatter = function (value, rec, index) {
        return "<input id='radio_id' name='radio_name' type='radio' value='" + rec.Id + "'/>";
    };

 $(document).ready( function(){ //呈现列表数据
  $('#tbList').datagrid({ onClickRow:
            function () {
                //单击行的时候,将单选按钮设置为选中
                var id = $('#tbList').datagrid("getSelected");
                $("input[name='name']").each(function () {
                    if ($(this).val() == id.Id) {
                        $(this).attr("checked", true);
                    }
                });
            }
        });
});
</script>
<table id="tbList" style="height: 300px;" striped="true" rownumbers="true" fitColumns="true" title="" iconcls="icon-edit"
         singleSelect="true" checkbox="true" idfield="Id" url="@Url.Action("ListData")">
            <thead>
                <tr>
                    <th field="Id" width="30" formatter="PickupList.RadioFormatter">
                    </th>
                </tr>
            </thead>
        </table>
复制代码

table中td的时间格式问题(2013-03-14)

1.页面

 <th field="Test" formatter="Common.TimeFormatter" width="50" ></th>

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;';//和一般的样式写法一样
                    }
                }
            });
    });
复制代码
分享到:
评论

相关推荐

    jquery easyui datagrid demo

    这个“jquery easyui datagrid demo”包含了一些关于如何使用 jQuery EasyUI 中 Datagrid 组件的示例和相关文档,帮助我们理解和应用 Datagrid。 首先,`datagrid.doc` 文件很可能是 Datagrid 的简要说明文档,它...

    扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件完整版Demo下载

    jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!

    jquery easyui datagrid性能优化

    jquery easyui datagrid 性能优化,优化后可快速提升查询性能。唯一的缺陷就是不支持可编辑grid了。只需要在引入easyui.js后面引入此js即可。

    JqueryEasyUI DataGrid例子

    综上所述,这个 JqueryEasyUI DataGrid 示例展示了如何使用前端框架与后端服务器配合,实现一个功能完备的表格应用。在实际开发中,开发者可以根据需求调整 DataGrid 的配置项,以及后台 Servlet 的逻辑,以适应各种...

    jquery easyui datagrid 教程

    jQuery EasyUI Datagrid 是一个基于 jQuery 和 EasyUI 框架的数据网格组件,它提供了丰富的数据展示和操作功能,常用于构建数据密集型的Web应用。这个教程将深入讲解其核心概念、用法以及常见应用。 一、jQuery ...

    jquery easyui datagrid demo 详解

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列丰富的组件,使得开发者可以轻松构建用户界面,而 Datagrid 是其中非常重要的一个组件,常用于数据展示和管理。本篇文章将详细解析 jQuery EasyUI ...

    jQuery EasyUI编辑DataGrid用combobox实现多级联动

    在jQuery EasyUI中,DataGrid是一种常用的表格展示控件,它可以与各种编辑器结合使用,如combobox(下拉框)来实现更丰富的交互功能。本文主要探讨的是如何利用jQuery EasyUI的DataGrid和combobox组件实现多级联动的...

    JQuery EasyUI DataGrid服务端分页时行号不延续的解决方法

    JQuery EasyUI DataGrid服务端分页加载数据后,DataGrid行号不能延续,总是重新由1开始。因为服务端分页取回的是单页数据,通过LoadData方法加载数据后,pageNumber属性被初始化为1,因此行号总是重新由1开始。现在...

    easyui datagrid 数据导出到Excel

    在IT行业中,EasyUI Datagrid是一款基于jQuery的前端数据展示组件,它提供了丰富的表格功能,如排序、分页、过滤等。在实际工作中,我们经常需要将这些展示的数据导出到Excel文件,以便进行进一步的分析或存储。下面...

    jQuery EasyUI datagrid实现本地分页的方法

    jQuery EasyUI datagrid是一个基于jQuery和EasyUI的UI组件库,提供了丰富的界面组件,其中的datagrid组件用于创建数据表格。 传统的分页方法通常是由后端服务器完成,即将全部数据检索出来后,由服务器端根据分页...

    easyui datagrid editor回车切换单元格示例,可参考

    easyui datagrid editor回车切换单元格示例,适合熟悉easyui但又不懂如何做的人员,可能参考一下源码JS。

    jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据

    jQuery Easyui DataGrid 是一个基于 jQuery 的用户界面插件,它提供了一种简单的方式来展示和编辑表格数据。DataGrid 组件支持分页、排序、搜索、和可编辑等功能。本文介绍了如何在 jQuery Easyui DataGrid 中实现...

    jquery easyui datagrid实现增加,修改,删除方法总结

    主要介绍了jquery easyui datagrid实现增加,修改,删除方法,结合实例形式分析了jquery easyui datagrid结合asp.net实现数据的增删改等操作的步骤与相关技巧,需要的朋友可以参考下

    解决EasyUIdataGrid列比较多,无数据,列展现不全

    EasyUI是一个基于jQuery的用户界面插件集合,它简化了Web应用的前端开发工作,使得开发者能够更加专注于业务逻辑的实现而非UI的构建。其中,dataGrid是EasyUI中一个非常重要的组件,用于展示表格数据,支持排序、...

    jquery EasyUI DataGrid

    jquery EasyUI DataGrid 实现批量删除和批量添加和批量更新,减少服务器交互

    jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码

    在jQuery EasyUI中,datagrid是一个常用的组件,用于展示表格数据并提供各种操作功能。在实际应用中,我们可能需要在用户翻页后仍然保持选择的行的状态,即记录被选中的行。这个问题可以通过监听datagrid的事件和...

    jQuery easyui datagrid动态查询数据实例讲解

    本文详细讲解了如何使用jQuery easyui datagrid组件进行动态查询数据的过程。具体来说,文章将从前端界面接受查询条件,通过后端PHP代码与MSSQL数据库交互,并返回JSON格式的数据展示在easyui datagrid中。这个过程...

    jquery easyui datagrid列传参

    该列设为超链接,点击时向调用的js方法传参。 return "(parameter)/&gt;这里onclick的参数是怎么传的呢

    jquery easyui dataGrid动态改变排序字段名的方法

    jQuery easyui dataGrid 动态改变排序字段名,一般情况下,在使用的时候,我们会点击相应字段进行排序,这里以JAVA为例,后端的实体类字段有可能和数据库的字段不一致; 如:实体类中的属性为userName,前台filed=...

    easyui的datagrid生成合并行,合计计算价格

    在IT行业中,EasyUI是一个基于JavaScript和jQuery的前端框架,它提供了一系列的UI组件,用于构建用户界面。在描述中提到的"easyui的datagrid生成合并行,合计计算价格",指的是如何使用EasyUI的DataGrid组件来实现...

Global site tag (gtag.js) - Google Analytics