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
                    }]],
                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 = 1;
            var pageSize = 15;
            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 = 0; i < 50;i++ )
            {
                WGTotalTableModel HModel = new WGTotalTableModel();
                HModel.PID = i + 1;
                HModel.PRJNAME="项目"+(i+1).ToString();
                HModel.LANDFOUR = "土地四至" + (i + 1).ToString();
                HModel.EARTHCOUNTRY = "地块" + (i + 1).ToString();
                HModel.EARTHTWON = "位置" + (i + 1).ToString();
                HModel.Price = i + 2;
                myList.Add(HModel);
            }
            List<WGTotalTableModel> ItemList = myList.Skip((pageIndex - 1) * pageSize).Take(pageSize).OrderBy(t => t.PRJNAME).ToList();
            model.rows = ItemList;
            model.total = myList.Count;
            return Json(model, JsonRequestBehavior.DenyGet);

        }

View Code

 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; }
    }

View Code

5、Easyui 引用文件

链接：https://pan.baidu.com/s/1KxL2QeVEbEVHU9UxV6LBWw
提取码：cwbd

Easyui datagrid 怎么添加操作按钮，rowStyler

猜你喜欢