Условная кнопка в столбцах Grid - PullRequest
Новая
       18

Условная кнопка в столбцах Grid

0 голосов
/ 26 февраля 2019

Я пытаюсь включить кнопку в сетку столбцов, используя Syncfusion GRID для Javascript (ejGrid): 

$("#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>' },

Действительно, у меня есть переменная Rest (остаток платежа) в моей таблице ServicesOrder, мойцель состоит в том, чтобы отобразить одну из двух кнопок (завершить или в процессе): 

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

1 Ответ

0 голосов
/ 27 февраля 2019

Мы выполнили ваше требование, используя функцию 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

...