说明：本篇文章主要是展示怎么设置easyUI datagrid的格式，包括行样式和列样式，以及添加操作按钮列
开发环境 vs2012 asp.net mvc4 c#
1、效果图
3、HTML代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DataGridTest.aspx.cs" Inherits="MvcAppTest.DataGridTest" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="Easyui/themes/default/easyui.css" rel="stylesheet" />
<script src="Easyui/jquery-1.7.2.min.js"></script>
<script src="Easyui/jquery.easyui.min.js"></script>
<script src="Easyui/locale/easyui-lang-zh_CN.js"></script>
<style type="text/css">
/*.datagrid-btable .datagrid-cell{overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
.datagrid-header {position: absolute; visibility: hidden;}*/
</style>
<script type="text/javascript">
var datagrid;
var officeId = 100;
var searchText = \'\';
$(function () {
InitData();
});
function InitData()
{
datagrid = $(\'#wg\').datagrid({
url: \'Home/getWGList\',
title: \'datagrid列表\',
iconCls: \'icon-save\',
pagination: true,
pagePosition: \'bottom\',
pageSize: 10,
height: 500,
width:600,
pageList: [10, 20, 30, 40],
queryParams: { officeId: officeId, srText: searchText },
fitColumns: false,
nowrap: true,
border: false,
idField: \'PID\',
sortName: \'PID\',
sortOrder: \'desc\',
rownumbers: false,
singleSelect: false,
checkOnSelect: true,
selectOnCheck: true,
columns: [[{
field: \'ck\',
checkbox:true
}, {
title: \'PID\',
field: \'PID\',
width:50
}, {
title: \'项目名称\',
field: \'PRJNAME\',
width:120,
formatter: function (value, row, index) {
return \'<span title=\' + value + \'>\' + value + \'</span>\'
}
}, {
title: \'价格\',
field: \'Price\',
width: 100,
formatter: function (value, row, index) {
if (value % 2 == 0) {
return \'<span style="color:red;">\' + value + \'</span>\';
} else {
return value;
}
}
},
{
field: \'ID\', title: \'操作\', width: \'35%\', align: \'center\', formatter: formatOper
}]],
toolbar: [{
text: \'添加\',
iconCls: \'icon-add\',
handler: function () { AddUser(); }
}, {
text: \'编辑\',
iconCls: \'icon-edit\',
handler: function () { EditUser(); }
}, \'-\', {
text: \'删除\',
iconCls: \'icon-delete\',
handler: function () { RemoveUser(); }
}, \'-\', {
text: \'取消选中\',
iconCls: \'icon-undo\',
handler: function () {
datagrid2.datagrid(\'uncheckAll\');
datagrid2.datagrid(\'clearSelections\');
datagrid2.datagrid(\'unselectAll\');
}
}, \'-\', {
text: \'<input id="searchOptionbox" style="width:200px;height:23px;"></input> \',
id: \'txtSearch\'
}, {
text: \'查询\',
iconCls: \'icon-search\',
handler: function () {
PrjSearch();
}
}, \'-\', {
text: \'全部\',
iconCls: \'icon-reload\',
handler: function () {
PrjAll();
}
}],
rowStyler: function (index, row) {
if(row.Price>30){
return \'background-color:#6293BB;color:#fff;font-weight:bold;\';
}
},
onRowContextMenu: function (e, rowIndex, rowData) {
e.preventDefault();
$(this).datagrid(\'unselectAll\');
$(this).datagrid(\'selectRow\', rowIndex);
},
onCheck: function (rowIndex, rowData) {
var PID = rowData.PID;
},
onLoadSuccess: function (data) {
}
});
}
function formatOper(val, row, index) {
return \'<input type="button" onclick="remove(\\'\' + row["PID"] + \'\\')" value="校验" /> <input type="button" onclick="removeXM(\\'\' + row["PID"] + \'\\')" value="删除" />\';
}
function removeXM(pid) {
alert(\'删除\');
}
function remove(pid) {
alert(\'校验\');
}
function rowStyle(index,row)
{
if (row.Price > 30) {
//return \'<span style="color:red;">\'+value+\'</span>\';
return \'background-color:#6293BB;color:#fff;\';
}
}
</script>
</head>
<body>
<div>
<table id="wg"></table>
</div>
</body>
</html>
4、Home控制器后台代码
public JsonResult getWGList(string officeId, string srText) { DataGridWGModel model = new DataGridWGModel(); var pageIndex = 1; var pageSize = 15; if (Request["page"] != null) { pageIndex = Int32.Parse(Request["page"].ToString()); } if (Request["rows"] != null) { pageSize = Int32.Parse(Request["rows"].ToString()); } List<WGTotalTableModel> myList = new List<WGTotalTableModel>(); for (int i = 0; i < 50;i++ ) { WGTotalTableModel HModel = new WGTotalTableModel(); HModel.PID = i + 1; HModel.PRJNAME="项目"+(i+1).ToString(); HModel.LANDFOUR = "土地四至" + (i + 1).ToString(); HModel.EARTHCOUNTRY = "地块" + (i + 1).ToString(); HModel.EARTHTWON = "位置" + (i + 1).ToString(); HModel.Price = i + 2; myList.Add(HModel); } List<WGTotalTableModel> ItemList = myList.Skip((pageIndex - 1) * pageSize).Take(pageSize).OrderBy(t => t.PRJNAME).ToList(); model.rows = ItemList; model.total = myList.Count; return Json(model, JsonRequestBehavior.DenyGet); }
public class DataGridWGModel { public List<WGTotalTableModel> rows { get; set; } public Int32 total { get; set; } } public class WGTotalTableModel { public System.Int32 PID { get; set; } public System.String PRJNAME { get; set; } public System.String LANDFOUR { get; set; } public System.String EARTHTWON { get; set; } public System.String EARTHCOUNTRY { get; set; } public System.Int32 Price { get; set; } }
5、Easyui 引用文件
链接：https://pan.baidu.com/s/1KxL2QeVEbEVHU9UxV6LBWw
提取码：cwbd