Easyui datagrid 怎么添加操作按钮，rowStyler
说明：本篇文章主要是展示怎么设置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
Easyui datagrid 怎么添加操作按钮，rowStyler的更多相关文章
- easyui datagrid 动态添加columns属性
公司在项目设计的时候,有一个需求,就是查出来的表的字段不唯一,一张表的字段可能是三个,也可能是五个,但是却要把它显示到页面,这个给我做ui的带来一点麻烦.因为以前一般用easyui 的datagrid ...
- JS-easyui 扩展easyui.datagrid，添加数据loading遮罩效果代码
(function (){ $.extend($.fn.datagrid.methods, { //显示遮罩 loading: function(jq){ return jq.each(functio ...
- 扩展easyui.datagrid，添加数据loading遮罩效果代码 --来自网摘收集
//jquery.datagrid 扩展 (function (){ $.extend($.fn.datagrid.methods, { //显示遮罩 loading: function(jq){ r ...
- easyui datagrid toolbar 添加搜索框
最近用到了就研究了下,效果 把列名稍加转换放入menubtton,对于单项搜索来说还是非常方便的 var fields = $('#tt').datagrid('getColumnFields') ...
- jQuery扩展easyui.datagrid，添加数据loading遮罩效果代码
//jquery.datagrid 扩展加载数据Loading效果 (function (){ $.extend($.fn.datagrid.methods, { //显示遮罩 loading: fu ...
- easyui datagrid 中添加combobox
项目需要,如下图所示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
- easyUI datagrid表格添加“暂无记录”显示
扩展grid的onAfterRender事件 var myview = $.extend({}, $.fn.datagrid.defaults.view, { onAfterRender: f ...
- easyui datagrid 每条数据后添加操作按钮
easyui datagrid 每条数据后添加“编辑.查看.删除”按钮 1.给datagrid添加操作字段:字段值 <table class="easyui-datagrid" ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（82）-Easyui Datagrid批量操作（编辑，删除，添加）
前言 有时候我们的后台系统表单比较复杂,做过进销存或者一些销售订单的都应该有过感觉 虽然Easyui Datagrid提供了行内编辑,但是不够灵活,但是我们稍微修改一下来达到批量编辑,批量删除,批量添 ...
随机推荐
- 洛谷P1201 [USACO1.1]贪婪的送礼者Greedy Gift Givers
题目描述 对于一群(NP个)要互送礼物的朋友,GY要确定每个人送出的钱比收到的多多少.在这一个问题中,每个人都准备了一些钱来送礼物,而这些钱将会被平均分给那些将收到他的礼物的人.然而,在任何一群朋友中 ...
- express之中间件bodyParser的理解
bodyParser用于解析客户端请求的body中的内容,内部使用JSON编码处理,url编码处理以及对于文件的上传处理.另外bodyParse也可以接受客户端ajax提交的json数据,以及url的 ...
- 转Yii框架radioButtonlist水平横排及去除除换行符号
横排: echo $form->radiobuttonlist($model, ‘type’,$arrtype,array(‘template’ => ‘<li style=”dis ...
- 关于django rest framework里token auth的实现及答疑
http://stackoverflow.com/questions/14838128/django-rest-framework-token-authentication ============= ...
- React项目的打包与部署到腾讯云
腾讯云送了30天的免费试用,于是有了把react项目部署到上面的想法.项目是默认生成的,只是一个页面,但是这个过程中也遇到了不少麻烦与问题.下面来具体梳理下: create-react-app 来自F ...
- Codeforces635C XOR Equation【数学】
题目链接: http://codeforces.com/contest/635/problem/C 题意: 给定两个数的和s及异或x,求两个数的可能情况. 分析: 我们有公式a+b=a& b∗ ...
- 洛谷—— P1342 请柬
https://www.luogu.org/problemnew/show/1342 题目描述 在电视时代,没有多少人观看戏剧表演.Malidinesia古董喜剧演员意识到这一事实,他们想宣传剧院,尤 ...
- Noip2017赛前的一些记录
前言 已经退役整整五个月了....选考以后终于又摸上了键盘.... 但是码力已经大不如前了........ 距离比赛也就只有一星期了....那就胡乱的做一些题目吧QAQ 这里是一些根据算法分类的咋杂题 ...
- 匿名块的四个类型（type rowtype record table）
Oracle PL/SQL块 匿名块的四个类型 type rowtype record table ---- type (列类型) %type类型是指声明变量的时候,参考某个表的某个列的类型---- ...
- Java生成GUID的方法
其实在Java上已经换了一个说法,叫做UUID,方法如下: java.util.UUID.randomUUID()