智能表+Angular js答案

【问题标题】：smart table +Angular js智能表+Angular js
【发布时间】：2014-05-24 05:41:07
【问题描述】：

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

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

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

【问题讨论】：

您为什么不与我们分享一个示例 plunkr，我们可以帮助您实现您想要的......？
@Nix plnkr.co/edit/xsJs8m?p=preview 以上 plunkr 已经由某人创建。在上面的示例中，我想要一个名为“NAME”的列，其中包含 colspan=2 和那些单元格名字和姓氏将被存储

标签： angularjs smart-table

【解决方案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

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

【讨论】：

【解决方案2】：

根据您需要添加以下内容的文档：

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 将根据映射调整标签。

【讨论】：

我尝试了你的建议。但没有用。由于 firstName 映射，它将重复该值
分享你的一些代码，让我们知道你从哪里开始
plnkr.co/edit/xsJs8m?p=preview 以上 plunkr 已由某人创建。根据您的建议，我已尝试在 columnCollection 范围变量中将 LastName 更改为 FirstName。但输出就像是重复 firstName 列的值到 lastName 列，因为我们在 LastName 列映射属性中具有相同的值“FirstName”