0

我在做剑道。如果我们观察一个网格，那么所有值都在每个单元格的左侧。我有一个价格字段，我希望它的值在单元格的右侧。

剑道ui可以吗？

我的代码：-

<div id="grid"></div>
<script>
 $(document).ready(function () {
var crudServiceBaseUrl = ${grailsApplication.config.grails.serverURL}"+/course/,
          dataSource = new kendo.data.DataSource({
             transport: {
                read:  {
                  url: crudServiceBaseUrl+"listAll", dataType: "json",
                                           cache: false                                                
                                       },
                                       parameterMap: function(options, operation) {
                                           if (operation !== "read" && options.models) {
                                            return {models:                    
                                            kendo.stringify(options.models)};                          
   }
                                       }
                                   },
                      batch: true,
                      pageSize: 15,
                      sort: { field: "dateCreated", dir: "desc" },
                      schema: {
                      model: {
                      id: "id",
                      fields: {
                      name: { editable: false, type: "string", validation: { required:   
                      true, min: 1} },
                      type: { editable: false, type: "Type",validation: { required: true, min: 1}  
                     },                                                    
                     fee: { editable: false, type: "double",validation: { required: true, min: 1}   
          },                                                     
                     duration: { editable: false, type: "integer",                                 validation: { required: true, min: 1} },                                                                    
                     status: { editable: false, type:"Status" ,                                 validation: { required: true, min: 1} }
                                            }
                                        }
                                    }
                                });


                    $("#grid").kendoGrid({
                        dataSource: dataSource,
                        navigatable: true,
                        pageable: true,
                        groupable:true,
                        sortable:true,
                        selectable:true,
                        height: 300,
                        columns: [
       {field: "name",
                title:'<g:message  code="grid.billingServicesGroup.holidayName.label"  
                default="Course Name" />'},
       {field: "type.name",
               title:'<g:message code="grid.billingServicesGroup.reason.label" 
               default="Type of course" />'},
       {field: "fee",title:'<g:message
               code="grid.billingServicesGroup.code.label" 
               default="Fee" />'},
       {field: "duration",title:'
          <g:message  code="grid.billingServicesGroup.holidayDate.label"   
        default="Duration(Year)" />'}
                         ,
       {field: "status.name",title:'<g:message   
             code="grid.billingServicesGroup.status.label" default="Status" />'},
                        ],
                        editable: true,
                        change:function(e){
                            idOfData=this.select().data("id");
                            window.location.href=crudServiceBaseUrl+"show/"+idOfData;
                        },
                        saveChanges:function(){
                        },
                        remove:function(e){
                            /*alert(e.model.id.value);
                            selectedId=this.select().data("id");
                            $.ajax({
                                url:"http://localhost:8080/billing-
                       app/api/skeletonBill/"+selectedId,
                                type:"DELETE"
                                }).done(function(){alert('deleted')});*/
                        },
                        scrollable: {
                            virtual: true
                        }
                    });
                });
            </script>
4

1 回答 1

1

您可以使用列模板将该列中所有单元格的内容包装在例如 div 标记中。然后，您可以使用 div 上的类来使用 CSS 设置内容样式。

例如：

columns:
[{
    field:"Department",
    title:"Department",
    width:80,
    template: "<div class='foobar'>#= Department#</div>"
}]

/* CSS */
.foobar {
    width: 100%;
    text-align: right;
}
于 2012-08-14T08:04:40.330 回答