EasyUI-数据表格的列格式

最新推荐文章于 2023-04-27 08:28:38 发布
最新推荐文章于 2023-04-27 08:28:38 发布
阅读量307 收藏
点赞数
分类专栏： Jquery EasyUI


@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script src="~/Scripts/jquery.easyui.min.js"></script>
    <script src="~/Scripts/easyui-lang-zh_CN.js"></script>
    <link href="~/Content/EasyUI/themes/icon.css" rel="stylesheet" />
    <link href="~/Content/EasyUI/themes/default/easyui.css" rel="stylesheet" />

</head>
<body>
    <h2>Format DataGrid Columns</h2>
    <p>The list price value will show red color when less than 30.</p>
    <div style="margin:20px 0;"></div>
    <table class="easyui-datagrid" title="Format DataGrid Columns" style="width:700px;height:250px"
           data-options="rownumbers:true,singleSelect:true,iconCls:'icon-ok',url:'datagrid_data1.json',method:'get'">
        <thead>
            <tr>
                <th data-options="field:'itemid',width:80">Item ID</th>
                <th data-options="field:'productid',width:100">Product</th>
                <th data-options="field:'listprice',width:80,align:'right',formatter:formatPrice">List Price</th>
                <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
                <th data-options="field:'attr1',width:240">Attribute</th>
                <th data-options="field:'status',width:60,align:'center'">Status</th>
            </tr>
        </thead>
    </table>
    <script>
        function formatPrice(val, row) {
            if (val < 30) {
                return '<span style="color:red;">(' + val + ')</span>';
            } else {
                return val;
            }
        }
    </script>
</body>
</html>

dxm809
关注
专栏目录
EasyUI样式
mlxlong
03-30 840
1.行样式rowStyler $('#dg').datagrid({ rowStyler: function(index,row){ if (row.listprice>80){ return 'background-color:#6293BB;color:#fff;'; } } }); 2.单元格样式styler $('#dg').datagrid({
easyui-datagrid给表格某列数据小于30的标红处理
weixin_45219973的博客
04-01 448
例：给表格标价列数据小于30的标红 <table class="easyui-datagrid" title="Format DataGrid Columns" style="width:700px;height:250px" data-options="rownumbers:true,singleSelect:true,iconCls:'icon-ok',url:'datagrid_data1.json',method:'get'"> <thead> <t
easyUI datagrid的数据格式
weixin_40408702的博客
09-05 414
easyui格式化列
牧牛遛马
07-29 451
为了格式化一个数据网格（DataGrid）列，我们需要设置 formatter 属性，它是一个函数。这个格式化函数包含三个参数： value：当前列对应字段值。 row：当前的行记录数据。 index：当前的行下标。function formatPrice(val,row){ if (val < 20){ return '<span style="color:red;"
jQuery EasyUI 数据网格 - 格式化列
最新发布
unber的博客
04-27 305
以下实例格式化在 easyui DataGrid 里的列数据，并使用自定义列的 formatter，如果价格小于 20 就将文本变为红色。为了格式化一个数据网格（DataGrid）列，我们需要设置 formatter 属性，它是一个函数。请注意，'listprice' 字段有一个 'formatter' 属性，用来指明格式化函数。创建数据网格（DataGrid）
easyui 数据列表的数据源格式
weixin_34219944的博客
08-10 205
easyui datagrid 的json数据有严格的格式，必须有total 和rows 例如： { "total":条数, "rows":[ {"id01":"282.32","id02":"122221","id03":"0329281","id04":"29292918"}, {"id01":"282.32","id02...
EasyUI 数据表格datagrid列自适应内容宽度的实现
01-19
项目初期在加载数据表格的时候为了提高表格数据渲染速度，设置了默认宽度。 现需求需要加一个表格自适应的功能，触发改功能，改变列宽度，但是不重新渲染表格，不发生数据请求。 设计思路，遍历每项的所有数据，...
easyui-treegrid冻结右侧列插件.zip
06-19
EasyUI 是一个基于 jQuery 的 UI 组件库，它提供了丰富的界面元素和数据展示方式，包括表格、树形结构等。在 EasyUI 中，TreeGrid 是一个结合了 Tree 和 Grid 功能的组件，既能展示层级数据，又能进行多列数据的展示...
easyui-表格拖动的实现
01-21
然后在 JavaScript 中，使用 `$(selector).datagrid(options)` 初始化表格，其中 `options` 是包含各种设置的对象，如数据源、列定义等。 3. **启用 Drag and Drop**： 为启用表格的拖放功能，需要分别对源表格和...
在easyui中DataGrid 里的列数据进行格式化
木雷双雄7
04-13 4995
DataGrid 里的列数据进行格式化，需要设置 formatter 属性，它是一个函数。这个格式化函数包含三个参数： value：当前列对应字段值。row：当前的行记录数据。index：当前的行下标。 创建数据网格（DataGrid） 设备名称 设备ID 送风温度 回风温度 室外温度 室外湿度
jquery-easyui自定义样式
08-16
一个自定义样式，通过颜色选择器来控制自己想要的样式。
漂亮的css表单样式
08-02
漂亮的表单样式，用css实现的，可以用在登录和注册页面上，需要的朋友就下载把，呵呵
浅谈jQuery easyui datagrid操作单元格样式
weixin_34355559的博客
06-19 401
　　今天项目上遇到问题，就是表格风格统一的问题，由于用了2个不同的框架，所以如果要大修比较麻烦，考虑到修改表格样式工作量会少很多，所以考虑修改jQuery easyui datagrid数据网格的样式。 　　对于这种问题，我们应该也经常遇到。其实利用jQuery的强大选择器，要操作到每个单元格都很容易，所以解决这个问题的思路也很简单，在数据加载完以后(这时候内容单元格才形成)，我们查找具体的列或...
easyui加载datagrid和treegrid的几种json数据格式
热门推荐
Linda的前端开发路
07-19 2万+
一、easyui加载datagrid的json数据格式       （1）基础的数据格式             {"total":28,"rows":[ {"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"E
EasyUI-datagrid表格样式自定义
缘如风的博客
09-05 2352
可以利用EasyUI的主题实现参考地址http://www.jeasyui.net/extension/195.html。默认也支持好几个（black、bootstrap、gray、metro、material等）也可以自定义主题。 本文采用的是自定义的CSS样式简单实现一些效果。主要是利用找到对应div设置相关的样式即可。效果如下 css实现如下 <style> body { background-color: #00438A; } .pane.
EasyUI-数据表格单元格风格
dxm809的博客
03-29 934
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Scri...
关于easyui中的样式应用
编程随笔
12-15 1万+
在使用easyui框架时，遇到一个小小的疑问。 在使用表格组件时，通常都会为表格组建设置属性：class="easui-datagrid"，如： easyui-datagrid" title="表格测试"> 由于我引入的是easyui.css文件，但是死活没有在该文件中找到名称为“.easyui-datagrid”的样式定义，查看了jquery.easyui.min.js，才
Easui中datagrid实现动态控制columns
majian_1987的专栏
10-29 6977
场景如下：            struts2+easyui实现动态表单，字段取自不同的表，datagrid显示的列名要根据不表的显示不同的字段。总之就是要控制datagrid中的columns属性。columns属性是一个数组。要控制这个属性就是要改变这个数组的内容。 从后台到前台原理如下： 1.  一个菜单链接进入动态表单之前要先进入一个action，通过这个action取得要显示的表
个性化定制easyui-datagrid开发实践与技巧
3. **列配置**：列配置是datagrid的核心，通过`columns`数组定义了字段名称、字段名、字段类型等，如设置`field`属性指定数据显示的列，`checkOnSelect`和`selectOnCheck`控制选中行为。 4. **样式和布局**：通过`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值