说明：本篇文章主要是展示怎么设置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 = ;
var pageSize = ;
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 = ; i < ;i++ )
{
WGTotalTableModel HModel = new WGTotalTableModel();
HModel.PID = i + ;
HModel.PRJNAME="项目"+(i+).ToString();
HModel.LANDFOUR = "土地四至" + (i + ).ToString();
HModel.EARTHCOUNTRY = "地块" + (i + ).ToString();
HModel.EARTHTWON = "位置" + (i + ).ToString();
HModel.Price = i + ;
myList.Add(HModel);
}
List<WGTotalTableModel> ItemList = myList.Skip((pageIndex - ) * 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