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提供了行内编辑,但是不够灵活,但是我们稍微修改一下来达到批量编辑,批量删除,批量添 ...
随机推荐
- Codevs 1010 过河卒== 洛谷 1002
时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 如图,A 点有一个过河卒,需要走到目标 B 点.卒行走规则:可以向下.或者向右.同 ...
- 标准C程序设计七---72
Linux应用 编程深入 语言编程 标准C程序设计七---经典C11程序设计 以下内容为阅读: <标准C程序设计>(第7版) 作者 ...
- ajax 分页（jquery分页插件pagination） 小例2
封装成:myPagination.js// ajax分页 function sendAjax(flag, dataParam, url, callback) {//封装的ajax: var shus ...
- shell - sed 简单使用记录
时间长不用,总是会忘掉的........还是烂笔头好些. sed 命令使用帮助及实操举例 功能:主要用来对一个或多个文件进行编辑,简化对文件的反复操作. 语法: sed [-hnV] [-e<s ...
- Vue开发之路由进阶
1.路由组件传参 在一个页面中,需要根据路由获得参数,然后在页面进行逻辑处理,可以通过$route来获取相关参数 但是这样一来,页面组件与路由耦合太高,为了解耦,页面组件可以在更大程度上进行复用,可以 ...
- T1155 金明的预算方案 codevs
累~~~ http://codevs.cn/problem/1155/ 题目描述 Description 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间金明自己专用的很宽敞的房间.更让他高 ...
- Codeforces Gym 100338H High Speed Trains 组合数学+dp+高精度
原题链接:http://codeforces.com/gym/100338/attachments/download/2136/20062007-winter-petrozavodsk-camp-an ...
- Codeforces 245G Suggested Friends 暴力乱搞
G. Suggested Friends time limit per test 2 seconds memory limit per test 256 megabytes input standar ...
- java保留n位小数
double x = 123456789.987654312; String.format("%.nf", x) n为保留的小数位,x必须为double类型. 例如保留3位小数 S ...
- 开源BT磁力搜索引擎收集
基本是利用bt网络中p2p技术实现,开源项目上实现了dht网络的搜索.是学习dht算法的好项目. https://lanmaowz.com/open-dht-spider/ https://githu ...