EasyUI DataGrid formatter 格式化增加链接

function fLoadTable() {

$(‘#tt‘).datagrid({

title: ‘‘,

url: location.href,

pagination: true,

pageSize: 20,

pagePosition: ‘top‘,

striped: true,

singleSelect: true,

rownumbers: true,

columns: [[

{

field: ‘ID‘, title: ‘ID‘, align: ‘center‘, formatter: function (value, row, index) {

return row.Room_id;

}

},

{ field: ‘FullBdName‘, title: ‘建筑‘, align: ‘center‘ },

{ field: ‘RoomName‘, title: ‘房间‘, align: ‘center‘ },

{ field: ‘ModuleAddr‘, title: ‘电表‘, hidden: true, align: ‘center‘ },

{ field: ‘ModuleCurrValue‘, title: ‘当前电表读数‘, align: ‘center‘ },

{ field: ‘ModuleRdValue‘, title: ‘当前电表剩余量‘, hidden: true, align: ‘center‘ },

{ field: ‘MthPayValue‘, title: ‘本月购电量‘, align: ‘center‘ },

{ field: ‘MthBaseValue‘, title: ‘本月赠电量‘, align: ‘center‘ },

{ field: ‘MthAcpValue‘, title: ‘上月结电量‘, align: ‘center‘ },

{ field: ‘MthUseValue‘, title: ‘本月用电量‘, align: ‘center‘ },

{ field: ‘DayUseValue‘, title: ‘本日用电量‘, align: ‘center‘ },

{ field: ‘syValue‘, title: ‘当前剩余电量‘, align: ‘center‘ },

{ field: ‘isSSR_S‘, title: ‘继电器状态‘, align: ‘center‘ },

{ field: ‘Update_dt‘, title: ‘最后通信时间‘, align: ‘center‘ },

                 { field: ‘Room_id‘, title: ‘查看详细‘, align: ‘center‘, formatter: fInfo }//主要是看这里

]]

});

};

function fInfo(rowIndex, rowData) {

return ‘<a href="javascript:fOpenRoomDetail(\‘‘ + rowIndex + ‘\‘,\‘‘ + rowData.Room_id + ‘\‘,\‘‘ + rowData.FullBdName + ‘\‘,\‘‘ + rowData.RoomName + ‘\‘)">详情</a>‘;

}

function fOpenRoomDetail(rowIndex, Room_id, FullBdName, RoomName) {

parent.fOpenRoomDetail(rowIndex, Room_id, FullBdName, RoomName);

//$(‘#dlg‘).dialog({

//    title: FullBdName + ‘->‘ + RoomName + ‘→详情‘,

//    width: 935,

//    height: 650,

//    closed: false,

//    cache: false,

//    collapsible: true,

//    maximizable: true,

//    resizable: true,

//    shadow: true,

//    left: 50,

//    top: 10,

//    //href: ‘/ShowData.aspx?RoomID=‘ + rowIndex,

//    modal: true,

//    content: ‘<iframe frameborder="0"  src="/ShowData.aspx?RoomID=‘ + Room_id + ‘"  style="height: 98%; width: 100%;" ></iframe>‘

//});

}

来自为知笔记(Wiz)

时间: 2024-10-11 22:57:54

EasyUI DataGrid formatter 格式化增加链接的相关文章

EasyUI DataGrid 时间格式化

页面代码: <table id="tbList" style="height: 340px;" striped="true" rownumbers="true" title="" iconcls="icon-edit" nowrap="false"  checkbox="true" idfield="Id" url=&qu

EasyUI DataGrid 中字段 formatter 格式化不起作用

今天用 EasyUI datagrid 来做列表,要对一些数据进行格式化,推断某字段状态时,发现 formatter 格式化相应的函数不起作用. <table id="list_data" title="未审核报表" class="easyui-datagrid" style="width: auto;height:350px;" url="" toolbar="#toolbar"

easyui datagrid columns的field支持属性的子属性(field.sonfield形式或者格式化程序形式)

所谓为了支持某属性的子属性,主要为了解决.在服务器返回的json格式的数据的某个属性带有自属性,而我们恰恰又需要使用到该子属性作为我们的datagrid的某个字段的.默认情况下datagrid只能支持一级属性字段(属性的属性字段属于二级字段). 对于这个问题的解决方案有两种方式 1.就是更改esayui源文件,使其支持field.sonfield的形式. javascript语法为我们提供了两种方式获取一个对象的属性:点字符连接和[]方式.使用[]可以很方便的将一个属性通过字符串的方式获取.但是

easyui datagrid 中序列化后的日期格式化

1.在easyui datagrid 中序列化后的日期显示为:/Date(1433377800000)/ 2.格式化后的显示为: 2015-06-04 08:30:00 3.使用代码如下: 3.1. <script type="text/javascript"> $(function () { $("#tdList").datagrid({ url: "/Admin/Dictionary/Index", title: "数据

springmvc+easyui datagrid columns的field支持属性的子属性(field.sonfield形式或者格式化程序形式)

所谓为了支持某属性的子属性,主要为了解决:在服务器返回的json格式的数据的某个属性带有子属性,而我们恰恰又需要使用到该子属性作为我们的datagrid的某个字段的.默认情况下datagrid只能支持一级属性字段(属性的属性字段属于二级字段). 对于这个问题的解决方案有两种方式: 1.就是更改esayui源文件,使其支持field.sonfield的形式. javascript语法为我们提供了两种方式获取一个对象的属性:点字符连接和[]方式.使用[]可以很方便的将一个属性通过字符串的方式获取.但

[Easyui - Grid]为easyui的datagrid、treegrid增加表头菜单,用于显示或隐藏列

为easyui的datagrid.treegrid增加表头菜单,用于显示或隐藏列 /** * @author 孙宇 * * @requires jQuery,EasyUI * * 为datagrid.treegrid增加表头菜单,用于显示或隐藏列,注意:冻结列不在此菜单中 */ var createGridHeaderContextMenu = function(e, field) { e.preventDefault(); var grid = $(this);/* grid本身 */ var

easyui datagrid中 formatter的用法

1.基本用法 单元格formatter(格式化器)函数,带3个参数: value:字段值. row:行记录数据. index: 行索引. $('#dg').datagrid({ columns:[[ {field:'userId',title:'User', width:80, formatter: function(value,row,index){ if (row.user){ return row.user.name; } else { return value; } } } ]] });

easyui datagrid可编辑表格使用经验分享

文章目录 1相关接口方法 2列属性formatter 3编辑器类型 3.1基于my97的编辑器 3.2简单的密码编辑器 3.3动态增加/删除编辑器 4字段的级联操作 4.1combobox的级联操作 4.2文本类型编辑器的级联 4.3编辑字段对非编辑字段的依赖 5数据提交与恢复 5.1利用loading提高用户体验 5.2结束编辑后获取原始数据 6常见问题集锦 6.1表头和数据表格错位 7效果演示 对于Easyui的可编辑表格,个人也是较为陌生的,尽管在操作方式上可能比使用表单修改的方式便捷,但

初识 easyui datagrid

首先应该下载好easyui datagrid所用的各种js 和css 这个可以到官网上去下载. 首先要引入datagrid所引入的js和css. <script src="js/jquery.min.js"></script><script src="js/jquery.easyui.min.js"></script><link rel="stylesheet" type="text