Question

我正在尝试使用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（付款余款），我的目标是显示两个按钮之一（Finish或In Progress）：

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>' }, `

Answer 1

我们使用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

网格列中的条件按钮

1 个答案: