datagrid 使用

本文档详细介绍了如何使用EasyUI框架对数据表格进行优化,包括调整页数框宽度、设置每页数据行数、设置行高、调整列宽及初始化数据表格等操作。

设置页数框的宽度:

.pagination  .pagination-num{

  width:30px;

}

 

设置每页数据的行数:

.pagination-page-list{

  width:20px;

}

 

设置行高:

可以通过设置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}})

 

设置行高

.datagrid-row {
  height: 30px;
}

 

文字和表情图片的居中对齐问题

这一项只需要设置表情图片的对齐方式即可

img{
  vertical-align:middle;
}

 span 标记内容的赋值与修改 用$("#id").html() 或者 #(“#id”).text(),普通的表单标签input一列用 $("#inputId").val() 和 $("#inputId").val(newValue)

 

div标签 滚动条用 css 属性设置即可

{

  overflow-x:hidden;

  overflow-y:scroll;

}

 

设置字间隔

使用CSS属性设置即可

{

  letter-spacing:3px;

}

 

转载于:https://www.cnblogs.com/maxiaoshuai/p/5544214.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值