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提供了行内编辑,但是不够灵活,但是我们稍微修改一下来达到批量编辑,批量删除,批量添 ...
随机推荐
- QBXT 二月五号整理
给你一列数, 询问和最大的子串. N<=10^6 // N <=10^6 #include<cstdio> #include<iostream> using nam ...
- C#中流写入类StreamWriter的介绍
C#中流写入类StreamWriter的介绍 (转) 应用FileStream类需要许多额外的数据类型转换工作,十分影响效率.使用StreamWriter类将提供更简单,更方便的操作方式. Str ...
- js-解决移动端点击事件的延迟问题
众所周知,在手机上的点击事件会有延迟300ms的问题.但在做手机端某些点击小游戏时,我们就需要取消这个延迟的问题: 第一步:禁止页面的缩放 <meta name="viewport&q ...
- win7dos删除文件和删除文件夹
如果要删除呢?也简单:假设删除d盘下的123文件夹 del/s/q d:\123\*.* ----(用于删除文件夹下的子文件) rd/s/q d:\123 ----(用于删除文件夹) /s参数为子目录 ...
- PE 512 Sums of totients of powers
可以很简单的发现,当n是奇数的时候,f(n)=φ(n),否则f(n)=0. 所以我们就是求n<=5*10^8且n为奇数的φ的和. 首先我们可以做到用杜教筛算出φ的前缀和,但是如何把偶数的减去? ...
- 第三章 poj 1064——关于带精度的二分法
/* 题意:给定n个实数l[i],给定一个k 问:求最大的ans,使得sum l[i]/ans i=1 to n >=k,且ans最大*/ #include <iostream> # ...
- Java-多态的理解（主要是解释一个网上经典的例子）
如题,本文重点不在于介绍什么是多态,所以一些基础的概念就不多说了(需要知道的时候会提一下).要了解多态的话这里推荐一篇 http://www.cnblogs.com/jack204/archive/2 ...
- java多线程03-----------------volatile内存语义
java多线程02-----------------volatile内存语义 volatile关键字是java虚拟机提供的最轻量级额的同步机制.由于volatile关键字与java内存模型相关,因此, ...
- IntelliJ IDEA常用统一设置2-Inspections检查设置（Linux/Mac/Windows）
Inspections检查设置功能,能检查一些普通问题,比如代码风格等等.当然,这个虽然没有CheckStyle这些插件专业,但也是另一种选择. 官方参考:https://www.jetbrains. ...
- 小程序使用wxParse插件解析html标签图片间距问题
转自:https://www.cnblogs.com/likun123/p/9543376.html 小程序解析html标签,就需要用到wxParse啦.但是在解析连续图片的时候,会发现图片之间会有间 ...