说明：本篇文章主要是展示怎么设置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>&nbsp;&nbsp; ',

                    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="校验" />&nbsp;&nbsp;<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的更多相关文章
	

    
								
  1. easyui datagrid 动态添加columns属性
		
    公司在项目设计的时候,有一个需求,就是查出来的表的字段不唯一,一张表的字段可能是三个,也可能是五个,但是却要把它显示到页面,这个给我做ui的带来一点麻烦.因为以前一般用easyui 的datagrid ...
    
		
    2. 
						
  2. JS-easyui 扩展easyui.datagrid，添加数据loading遮罩效果代码
		
    (function (){ $.extend($.fn.datagrid.methods, { //显示遮罩 loading: function(jq){ return jq.each(functio ...
    
		
    3. 
						
  3. 扩展easyui.datagrid，添加数据loading遮罩效果代码 --来自网摘收集
		
    //jquery.datagrid 扩展 (function (){ $.extend($.fn.datagrid.methods, { //显示遮罩 loading: function(jq){ r ...
    
		
    4. 
						
  4. easyui  datagrid toolbar  添加搜索框
		
    最近用到了就研究了下,效果  把列名稍加转换放入menubtton,对于单项搜索来说还是非常方便的 var fields =  $('#tt').datagrid('getColumnFields') ...
    
		
    5. 
						
  5. jQuery扩展easyui.datagrid，添加数据loading遮罩效果代码
		
    //jquery.datagrid 扩展加载数据Loading效果 (function (){ $.extend($.fn.datagrid.methods, { //显示遮罩 loading: fu ...
    
		
    6. 
						
  6. easyui  datagrid 中添加combobox
		
    项目需要,如下图所示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
    
		
    7. 
						
  7. easyUI datagrid表格添加“暂无记录”显示
		
    扩展grid的onAfterRender事件 var myview = $.extend({}, $.fn.datagrid.defaults.view, {     onAfterRender: f ...
    
		
    8. 
						
  8. easyui datagrid 每条数据后添加操作按钮
		
    easyui datagrid 每条数据后添加“编辑.查看.删除”按钮 1.给datagrid添加操作字段:字段值 <table class="easyui-datagrid" ...
    
		
    9. 
						
  9. ASP.NET MVC5+EF6+EasyUI 后台管理系统（82）-Easyui Datagrid批量操作（编辑，删除，添加）
		
    前言 有时候我们的后台系统表单比较复杂,做过进销存或者一些销售订单的都应该有过感觉 虽然Easyui Datagrid提供了行内编辑,但是不够灵活,但是我们稍微修改一下来达到批量编辑,批量删除,批量添 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. How to debug Android Native Application with eclipse
			
    This blog is inspired by this tutorial http://mhandroid.wordpress.com/2011/01/23/using-eclipse-for-a ...
    
			
    2. 
						
  2. Ubuntu 16.04 LTS 成功编译 Android 6.0 源码教程
			
    sudo apt-get install -y git flex bison gperf build-essential libncurses5-dev:i386 \  libx11-dev:i386 ...
    
			
    3. 
						
  3. 关于unity3d插件的自动打包
			
    开发中,迩可能会遇到在xcode里添加一些需要调用原生api的方法,可能是game center,可能是内购之类的,但是这些插件实在太多了,所以迩大可不必自己写这些插件,问题在于,国内的一些插件,像9 ...
    
			
    4. 
						
  4. iOS8下定位问题解决
			
    项目是以前iOS7的,升级iOS8后,无法成功获取用户位置.后来才发现iOS8 使用定位需要在infoplist文件中加2个key,然后manager需要加一个方法,指定定位授权机制   在plist ...
    
			
    5. 
						
  5. php--strlen()与mb_strlen的作用与区别
			
    在PHP中,strlen与mb_strlen是求字符串长度的函数PHP内置的字符串长度函数strlen无法正确处理中文字符串,它得到的只是字符串所占的字节数.对于GB2312的中文编码,strlen得 ...
    
			
    6. 
						
  6. php--转码函数
			
    最近在用dedecms二次开发会员功能:大家都知道dedecms编码是GBK格式的:所以在我们在项目中经常需要转码,在我了解中有两种转码方式:一是:iconv:二是mb_convert_encodin ...
    
			
    7. 
						
  7. 我的第一个Java程序HelloWorld
			
    public class HelloWorld{ public static void main(String [] args){ System.out.println("HelloWorl ...
    
			
    8. 
						
  8. jquery 全选获取值
			
    首选区分一下prop与attr的差别.prop是固有属性,attr自定义属性. $("#all").click(function () {//全选.反选 if(this.check ...
    
			
    9. 
						
  9. [反汇编练习] 160个CrackMe之031
			
    [反汇编练习] 160个CrackMe之031. 本系列文章的目的是从一个没有任何经验的新手的角度(其实就是我自己),一步步尝试将160个CrackMe全部破解,如果可以,通过任何方式写出一个类似于注 ...
    
			
    10. 
						
  10. 计算广告、推荐系统论文以及DSP综述
			
    http://www.huxmarket.com/detail/2966 DSP场景假定前提: 以CTR预估为例,向广告主以CPC(OCPC)方式收费,向ADX以CPM方式付费.投放计划受预算限制,在 ...
    
			
    11.