Easyui datagrid 怎麼新增操作按鈕，rowStyler

阿新 • • 發佈：2019-01-11

說明：本篇文章主要是展示怎麼設定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

說明：本篇文章主要是展示怎麼設定easyUI datagrid的格式，包括行樣式和列樣式，以及新增操作按鈕列開發環境 vs2012 asp.net mvc4 c# 1、效果圖 3、HTML程式碼

jquery easyui datagrid 無滾動條，datagrid 沒垂直滾動條

p s load grid 技術如果 fan 垂直滾動條收藏解決 jquery easyui datagrid 無滾動條，datagrid 沒垂直滾動條 ============================== 蕃薯耀 2018年2月6日 http://www

bootstarp table 初始化列的時候，添加個操作按鈕，事件

/** * 初始化表格的列 */ TaskError.initColumn = function () { return [ {field: 'selectItem', radio: true}, {title: '', field: '

EasyUI datagrid 實現標題居中，內容居左的方法

分享一下我老師大神的人工智慧教程吧。零基礎，通俗易懂！風趣幽默！http://www.captainbed.net/ 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

easyui datagrid 自定義按鈕列(4)

1.原始碼 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="keywords" content="jquery,u

SmartClient動態新增操作按鈕

場景：後臺查詢的資料為LIST集合，動態生成表格的同時需要動態添給每行新增按鈕。效果圖如下具體實現程式碼如下： 1.首先我們var一個ListGrid 2. 準備ListCrid對應的dataSource 3.在需求的按鈕點選事件中，我們先準備要動態新

easyui datagrid新增搜尋框

圖例：程式碼部分： ----------------------------------------- 匯入easyui CSS,JS檔案： <link rel="stylesheet" type="text/css" href="../../easyui/th

easyui datagrid列使用按鈕

前的方法，只能顯示成問題，不能顯示按鈕。 $('#datagrid').datagrid({ border:false, fitColumns:true, singleSelect: true, url:url, columns

jquery easyui datagrid 新增超連結

在網上也沒找到解決辦法，就自己去試，終於給試出來了，希望對大家有幫助。用的struts2，返回的json物件，裡面存放的是List<Map<String,Object>> Map裡面有資料：key:"username"和"id"等如下程式碼放到您

easyui datagrid的列編輯，同時插入兩張表的資料進去

看圖說話。需求：插入兩張表，上面的表單是第一張表的內容，下面的兩個表格是第二張詳情表的內容，跟第一張表的id關聯第二張表有一個列是需要使用者手動填寫新增的。國際慣例，上程式碼 <div id="cc" class="easyui-layout" style

EasyUI DataGrid新增超連結

問題如何在表單中新增超連結實現效果解決方案在datagrid行裡新增一列，如下（說明：最好指向非顯示列）【扯淡，這英文單引號真醜】 <th data-opt

WPF 獲取ListView中列新增LinkButton按鈕，點選按鈕的當前行的ID值

前臺把ID值繫結到Tag屬性中（Tag="{Binding Path=id}"） <DockPanel HorizontalAlignment="Left" Name="dpBody" VerticalAlignment="Top

textView 彈出鍵盤上面新增完成按鈕，並設定輸入內容的格式。

- (void)setContentView{ self.contentTextView = [[UITextView alloc]initWithFrame:CGRectMake(11, 70,

easyUI的datagrid每行數據添加操作按鈕的方法

gpo IT span iss 超鏈接 post col this string 今天做項目的時候，想在easyui的datagrid每一列數據後邊都加上一個操作按鈕，一開始想在後臺拼接字符串用JSON傳回，但是我測試之後發現這個方法不管用，在網上搜索了一下，整理如下：

基於Easyui框架的datagrid繫結資料，新增，修改，刪除方法(一)

基於Easyui框架的datagrid繫結資料，新增，修改，刪除方法第一種：https://blog.csdn.net/u012949335/article/details/81943387 第二種：https://blog.csdn.net/u012949335/arti

基於Easyui框架的datagrid繫結資料，新增，修改，刪除方法(三)

基於Easyui框架的datagrid繫結資料，新增，修改，刪除方法第一種：https://blog.csdn.net/u012949335/article/details/81943387 第二種：https://blog.csdn.net/u012949335/arti

easyUI-datagrid屬性設置display：none，表頭不顯示

format tle mar data res for 可能 com rownum <div class="box1"> <div class="dg1Box" style="margin-top:15px; margin-left:25

Easyui Datagrid 的Combobox 如何動態修改下拉選項，以及值的轉換

options 解釋 logs sel onclick med rsize rip 原因我是先將下拉選項的值通過datagrid的url查出來了，在每一行的row中 //項目結果選項卡的列表 $(‘#project_table‘).datagrid({

從零開始學 Web 之 HTML5（二）表單，多媒體新增內容，新增獲取操作元素，自定義屬性

器） user 對比 style 按鈕 ont mp3 url -- 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔博客園：ht

批量操作：更改密碼，新增用戶，添加ACL權限，刪除用戶

img 刪除用戶批量操作新增 acl權限 info inf acl 改密更改密碼刪除用戶設置ACL權限添加用戶批量操作：更改密碼，新增用戶，添加ACL權限，刪除用戶

Easyui datagrid 怎麼新增操作按鈕，rowStyler

相關推薦