2

我正在使用Smart-table通过 Angular js 向用户显示报告。

现在，我想自定义表头并希望在智能表的表头中有一个 colspan。

有人知道吗？有可能吗？请分享示例，如果有人实现了这一点，plunker

4

2 回答 2

1

你可以在 cellTemplate attr 中拥有任何你想要的模板，我在其中连接了名字和姓氏。

就像我用过的一样，

 scope.columnCollection = [
                { label: 'Name', map: 'FirstName', validationAttrs: 'required', validationMsgs: '<span class="error" ng-show="smartTableValidForm.FirstName.$error.required">Required!</span>',cellTemplate:'<div class="name"><span>{{dataRow.FirstName +" "+dataRow.LastName}}</span><div>'}, //have whatever template you want and your custom css
                //{ label: 'Last Name', map: 'LastName' },
                { label: 'User Name', map: 'UserName', validationAttrs: 'required' },
                { label: 'Password', map: 'Password', noList: true, editType: 'password' },
                { label: 'Customer', map: 'CustId', optionsUrl: '/GetCusts', editType: 'radio' },
                { label: 'Role', map: 'RoleId', optionsUrl: '/GetRoles', editType: 'select', defaultTemplate: '<option value="" ng-hide="dataRow[column.map]">---</option>', validationAttrs: 'required', validationMsgs: '<span class="error" ng-show="smartTableValidForm.RoleId.$error.required">Required!</span>' }, // NOTE: small hack which enables defaultTemplate option :)
                { label: 'E-mail', editType: 'email', map: 'Email' },
                { label: 'Cell Phone', map: 'Mobilephone', noEdit: true, validationAttrs: 'required' },
                { label: 'Locked', map: 'IsLocked', cellTemplate: '<input disabled type="checkbox" name="{{column.map}}" ng-model="dataRow[column.map]">', editType: 'checkbox', noAdd: true }
            ];

在 css 中，您可以拥有自己的自定义 css。

请看看这个 plunker

希望这能解决你的问题:)

于 2014-07-23T05:46:57.770 回答
0

根据文档，您需要添加如下内容：

app.controller('basicsCtrl', ['$scope', function (scope) {
    scope.rowCollection = [
        {firstName: 'Laurent', lastName: 'Renard', birthDate: new Date('1987-05-21'), balance: 102, email: 'whatever@gmail.com'},
        {firstName: 'Blandine', lastName: 'Faivre', birthDate: new Date('1987-04-25'), balance: -2323.22, email: 'oufblandou@gmail.com'},
        {firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: 'raymondef@gmail.com'}
    ];

    scope.columnCollection = [
        {label: 'First Name', map: 'firstName'},
        {label: 'same same but different', map: 'firstName'},
        {label: 'Last Name', map: 'lastName'}
    ];
}]);

您的 columnCollection 将根据映射调整标签。

于 2014-04-10T13:28:48.243 回答