时间戳

首页 > 解决方案 > 网格列中的条件按钮

javascript - 网格列中的条件按钮

问题描述

我正在尝试使用 Syncfusion GRID for Javascript (ejGrid) 在 Columns Grid 中包含一个按钮：

$("#Grid").ejGrid({
            dataSource: ej.DataManager({
           .
columns: [ 
         .
         .
{ headerText: 'Detail', template: '<a class="btn btn-info" rel='nofollow'  
rel='nofollow' href="/ServicesOrder/Detail/{{:ServicesOrderId}}">Detail</a>,<a class="btn btn-sucess" >Finish</a> ,  
'<a class="btn btn-danger" >In progress</a>' },

实际上，我的表 ServicesOrder 中有一个变量 Rest（剩余付款），我的目标是显示两个按钮之一（完成或进行中）：

if (Rest == 0) 
Only display --> 
{ headerText: 'Detail', template: '<a class="btn btn-info" rel='nofollow' 
rel='nofollow' href="/ServicesOrder/Detail/{{:ServicesOrderId}}">Detail</a>,<a class="btn btn-sucess" >Finish</a> ' }, 

Else 
Only display --> 
{ headerText: 'Detail', template: '<a class="btn btn-info" rel='nofollow' 
rel='nofollow' href="/ServicesOrder/Detail/{{:ServicesOrderId}}">Detail</a>,<a class="btn btn-danger" >In progress</a>' }, `

标签： javascriptasp.net-coresyncfusion

解决方案

我们已经使用 columnTemplate 功能和 JS 渲染（如果其他条件）实现了您的要求。根据已验证的列值，将呈现按钮。请参考以下代码示例

`<script type="text/x-jsrender" id="columnTemplate">
                    {{if Verified}}
  <a class="btn btn-info" rel='nofollow' rel='nofollow' href="/ServicesOrder/Detail/{{:ServicesOrderId}}">Detail</a>,<a class="btn btn-sucess">Finish</a>
                    {{else}}
 <a class="btn btn-info" rel='nofollow' rel='nofollow' href="/ServicesOrder/Detail/{{:ServicesOrderId}}">Detail</a>,<a class="btn btn-danger">In progress</a>
                    {{/if}}   
                </script>
                <div id="Grid"></div>         
    <script type="text/javascript">
        $(function () {
            $("#Grid").ejGrid({
                // the datasource "window.employeeView" is referred from jsondata.min.js
                dataSource: window.gridData,
                allowPaging: true,
                pageSettings: { pageSize: 4 },
                columns: [
                    { field: "OrderID", headerText: "Order ID", isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 90 },
                    { field: "CustomerID", headerText: "Customer ID", width: 150 },
                    { field: "EmployeeID", headerText: "Employee ID", textAlign: ej.TextAlign.Right, width: 100 },
                    { field: "OrderDate", headerText: "Order Date", textAlign: ej.TextAlign.Right, width: 100, format: "{0:MM/dd/yyyy}" },
                    { field: "Freight", headerText: "Freight", textAlign: ej.TextAlign.Right, format: "{0:C}" },
                    { field: "Verified", headerText: "Verified", width: 100 },
                    { headerText: "Employee Image", template: "#columnTemplate", textAlign: "center", width: 110 },
                ]
            });
        });
    </script>`

请参阅以下示例

示例：https ://jsplayground.syncfusion.com/x33fazrh

请参阅帮助文档以供参考

https://help.syncfusion.com/js/grid/columns#column-template

https://www.jsviews.com/#iftag

推荐阅读