datagrid 使用

设置行高:

可以通过设置td高度来设置行高,设置代码如下:

.datagrid-header td,.datagrid-body td
{
  height:40px;
}

设置 rownumber 的宽度,防止行数字不能完整显示

修改css代码即可:

.datagrid-header-rownumber,.datagrid-cell-rownumber
{
  width:50px;
}

设置列的宽度

这个只需要在进行列设置时指定宽度即可:

columns:[[
  {field:‘id‘,title:‘id‘,align:‘center‘,halign:‘center‘,width:‘100‘},
  {field:‘protocol‘,title:‘protocol‘,align:‘center‘,halign:‘center‘,width:‘100‘},
  {field:‘srcIp‘,title:‘srcIp‘,align:‘center‘,halign:‘center‘,width:‘100‘},
  {field:‘dstIp‘,title:‘dstIp‘,align:‘center‘,halign:‘center‘,width:‘100‘},
]],

width:‘100‘  //里面不需要写任何长度单位

datagrid 重新加载

$("#dg").datagrid("reload")

datagrid 根据参数加载数据

$("#dg").datagrid("load",{id:id,name:name});

datagrid 初始化

$("#dg).datagrid({url:‘...‘,queryParams:{name:‘...‘,id:123}})

时间: 2024-10-03 14:01:00

datagrid 使用的相关文章

jquery easyui里datagrid用法记录

1.删除行方法(deleteRow) $('#ruleManagementTable').datagrid('deleteRow', 1); //1代表选中的行索引 2.删除多行数据 var rows = $('#ruleManagementTable').datagrid("getSelections"); //获取你选择的所有行 //循环所选的行 for(var i =0,l=rows.length;i<l;i++){ var index = $('#ruleManageme

datagrid不能显示数据,原因在于JSON字符串存在特殊字符

最近在使用easyui的datagrid展示报表时老是出现报表不能正常显示的情况,看所拼接而成的JSON格式数据表面上却没任何的问题,根据经验排查了一下所生产字符串中是否含有特殊字符,果然查到部分字段里存在回车换行符,手动替换之后报表显示正常.问题找到了,接下来就是怎么解决问题的事: 一.从根源解决问题,在数据提交保存的时候就把该替换的全替换掉,一劳永逸.但写出来的东西很长,是不是有点难看. content=trim(Replace(Replace(Replace(Replace(Request

datagrid 里面的formatter方法

A.{field:'station_staus',title:'工位状态',width:250,align:'center',formatter: function(value,row,index){ if (row.station_staus==0){ return "现实"; } if(row.station_staus==1){ return "虚拟"; } }}, B.function(value, row, index) { return "&l

EasyUI DataGrid 应用示例

我们使用如下标签来创建表格 <table id="dg"></table> JS代码如下: $('#dg').datagrid({        columns:[[            {field:'TIME',title:'标题1,width:140},            {field:'SUM_NUM',title:'标题2,width:140, styler:function(value,row,index){                  

EasyUi -- 如何根据动态加载panel和Datagrid

在做项目的过程中,前台的面板和表格一般都不是固定的,它是根据后台传来的数据进行变化的.举个例子: 实现: 看一下我们的效果图: 这个上面的最左边的Panel要根据系别动态加载,有多少个系别就要加载都少个Panel,Panel里面的是一个table,这个里面也是动态加载出来. 右边是一个datagrid,datagrid里面的工作效率.业务能力等等也都是数据库动态加载出来的,包括后面的ABCD也是动态的. 这样就算数据库中的数据怎么变,这里都会动态地加载出来.那么怎么实现这些功能呢? 一.动态加载

WPF 实现 DataGrid/ListView 分页控件

在WPF中,通常会选用DataGrid/ListView进行数据展示,如果数据量不多,可以直接一个页面显示出来.如果数据量很大,2000条数据,一次性显示在一个页面中,不仅消耗资源,而且用户体验也很糟糕.这篇博客将介绍如何创建一个分页控件. 为了简单起见,这个分页控件目前只有 首页/上一页/下一页/末页/总页数/第几页 等功能.实现思路,首页/上一页/下一页/末页 这四个通过路由事件来实现,在使用时可以使用命令进行绑定,或者直接使用均可.总页数和第几页通过依赖属性来实现,使用时将页数进行绑定显示

EasyUI带选择框的DataGrid实现点击行&quot;不选中或取消选中&quot;的解决方法。

1 var IsCheckFlag = true; //标示是否是勾选复选框选中行的,true - 是 , false - 否 2 $("#dg").datagrid({ 3 rownumbers:true, 4 url: 'LeadsData.ashx?o=list', 5 method:'get', 6 fit: true, 7 striped:true, 8 pagination: true, 9 fitColumns: true, 10 checkOnSelect: false

JQuery EasyUI DataGrid 纵向(转置)表格插件 TransposedView

在页面上显示表格时,有时会遇到有些表格的列非常多,而行却比较少.例如财务报表,往往有几十列,行却只有最多三行,显示在页面上的话页面会被极大地拉宽,体验不好.通常的做法是把这种表格改为纵向显示,像矩阵的转置一样,行变成‘列’,列变成‘行’.该插件即可为DataGrid添加纵向排列表格的功能. 效果图如下: 插件下载:http://files.cnblogs.com/files/mergen/jquery-easyui-datagrid-transposedview.zip 使用步骤: Step 1

Datagrid接收JSON数据格式

开打View下面的Shared创建一个视图模版(母版页)<!DOCTYPE html> <html> <head> <title>Main</title> <script src="@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script> <script src=&qu

(原创)EasyUI中datagrid的行编辑模式中,找到特定的Editor,并为其添加事件

有时候在行编辑的时候,一个编辑框的值要根据其它编辑框的值进行变化,那么可以通过在开启编辑时,找到特定的Editor,为其添加事件 // 绑定事件, index为当前编辑行 var editors = $('#staffLogDetailGrid').datagrid('getEditors', index);     //获得当前行的编辑对象 console.info(editors[5]);  //editor[5]表示第五列这个控件 var sfgzEditor = editors[5];