Question

我在这里查看ComponentOne Wijmo angularJS条件模板示例和动态列以及模板示例：

http://demos.componentone.com/wijmo/5/Angular/CellTemplateIntro/CellTemplateIntro/

ComponentOne正在向软件询问相当多的$$$，我只需要一次性构建的东西。

我从大约十年前的表格中获得了MS Access中的寄售客户及其库存数据库我使用静态html页面作为模板打印出寄售中每个项目的价格标签，条形码，产品信息和几个收据。

我想通过迁移到HTML5和AngularJS来更好地控制我能够选择打印的内容。

不要鄙视，但是看看下面的ComponentOne示例，我不清楚他们设计的内容是什么特别或专有。我想在SO Brain Trust的指导下从零开始设计我自己的版本。

HTML

<div class="col-md-6 conditional">
<wj-flex-grid 
    items-source="data3" 
    allow-sorting="false" 
    initialized="dynaColumnsFlexInit(s)"
    style="height:300px" 
    selection-mode="None"
    allow-dragging="None" 
    defer-resizing="true">
    <wj-flex-grid-column 
        header="Country" 
        binding="country">
        <wj-flex-grid-cell-template cell-type="GroupHeader">
            <ng-include 

    src="'scripts/CellTemplates/countryGroupHeaderTemplate.html'">
            </ng-include>
        </wj-flex-grid-cell-template>
    </wj-flex-grid-column>

    <!-- ng-init here creates the colCtx property with subproperties 
        that are isolated on a column level, that is not visible to 
        another columns but share data with all the cell templates
        defined for the column. -->
    <wj-flex-grid-column
        ng-repeat="col in statisticsColumns" 
        ng-init="colCtx = { reportType: col.reportType || 'Chart' }"
        ng-if="col.isAvailable"
        header="{{col.header}}" 
        binding="{{col.binding}}" 
        width="{{col.width}}" 
        format="{{col.format}}"
        aggregate="Sum" 
        align="{{col.align}}">
        <wj-flex-grid-cell-template 
            cell-type="ColumnHeader" 
            ng-if="col.columnHeaderTemplateUrl">
            <ng-include src="col.columnHeaderTemplateUrl">
            </ng-include>
        </wj-flex-grid-cell-template>
        <wj-flex-grid-cell-template 
            cell-type="Group" 
            ng-if="col.groupTemplateUrl">
            <ng-include src="col.groupTemplateUrl">
            </ng-include>
        </wj-flex-grid-cell-template>
    </wj-flex-grid-column>

</wj-flex-grid>

<div style="margin:5px 0 5px"><b>Show statistics for:</b></div>
<wj-list-box 
    class="checkable-listbox"
    style="min-width:150px"
    items-source="statisticsColumns"
    display-member-path="header"
    checked-member-path="isAvailable">

</wj-list-box>
</div>

JS档案

var getCv = function (data) {
var dataCv = new wijmo.collections.CollectionView(data);
dataCv.sortDescriptions.push(new      
wijmo.collections.SortDescription('date', true));
dataCv.groupDescriptions.push(new 
wijmo.collections.PropertyGroupDescription('country'));
return dataCv;
}

$scope.data3 = getCv(data);

$scope.statisticsColumns = [
{
    binding: 'downloads',
    header: 'Downloads',
    width: '230',
    align: 'center',
    format: 'N0',
    columnHeaderTemplateUrl:   
'scripts/CellTemplates/statHeaderTemplate.html',
    groupTemplateUrl: 'scripts/CellTemplates/statGroupTemplate.html',
    reportType: 'Chart',
    isAvailable: true
},
{
    binding: 'sales',
    header: 'Sales',
    width: '230',
    align: 'center',
    format: 'N2',
    columnHeaderTemplateUrl: 
'scripts/CellTemplates/statHeaderTemplate.html',
    groupTemplateUrl: 'scripts/CellTemplates/statGroupTemplate.html',
    reportType: 'Chart',
    isAvailable: false
},
{
    binding: 'expenses',
    header: 'Expenses',
    width: '230',
    align: 'center',
    format: 'N2',
    columnHeaderTemplateUrl: 
'scripts/CellTemplates/statHeaderTemplate.html',
    groupTemplateUrl: 'scripts/CellTemplates/statGroupTemplate.html',
    reportType: 'Table',
    isAvailable: true
},
];

$scope.dynaColumnsFlexInit = function (flex) {
flex.collapseGroupsToLevel(0);
flex.columnHeaders.rows.defaultSize = 36;
flex.cells.rows.defaultSize = 156;
}

我是否在幕后遗漏了一些东西，或者在没有高价的情况下，任何类型的通用柔性网格都会完成同样的事情吗？

statHeaderTemplate文件：

{{$col.header}}:
<wj-combo-box 
items-source="['Chart', 'Table']" 
selected-value="colCtx.reportType"
style="width:100px;font-weight:400" 
is-editable="false">
</wj-combo-box>

statGroupTemplate文件：

<div style="font-size:small;text-align:center">
<wj-flex-grid ng-if="colCtx.reportType == 'Table'"
    items-source="$item.items"
    is-read-only="false"
    headers-visibility="None"
    selection-mode="Cell"
    format="{{$col.format}}"
    style="height:140px;width:200px">
<wj-flex-grid-column 
binding="date" 
width="*">
</wj-flex-grid-column>
<wj-flex-grid-column 
binding="{{$col.binding}}" 
width="*">
</wj-flex-grid-column>
</wj-flex-grid>
<wj-flex-pie 
ng-if="colCtx.reportType == 'Chart'"
items-source="$item.items" 
binding="{{$col.binding}}"
tooltip-content="<b>{value:{{$col.format}}}</b><br/>{date:MMM yyyy}"                      
style="height:140px;width:140px;display:inline-block">
<wj-flex-chart-legend position="None"></wj-flex-chart-legend>
<wj-flex-pie-data-label 
content="'{date:MMM}'" 
position="Inside">
</wj-flex-pie-data-label>
</wj-flex-pie>
    </div>

countryGroupHeaderTemplate

<img ng-src="resources/{{$item.name}}.png" />
{{$item.name}}

如果您注意到statHeaderTemplate，statGroupTemplate和countryGroupHeaderTemplate具有Angular ng引用，但我看到wijmo引用散布（wj-whatever）和wijmo集合（请参阅JS选项卡）。

我对建议完全开放 - 无论有什么作用，我都可以为相应的行在每列（以及我选择的形式）中显示的内容进行条件选择。

我的目标是保留静态html文件以打印边框和徽标，并使用flex图表中的单元格数据作为模板的输入，这样我就可以一次打印出所选项目。

我希望在开始项目之前，是否可以使用HTML5和AngularJS重新分析和重做这些内容。我想摆脱MS Access / VBA。

我的观点是，即使我必须放弃静态HTML文件模板以保持AngularJS的快乐，我愿意这样做，但静态HTML文件有图形，等等。我更喜欢保留。

有没有办法修改生成我的静态HTML文件的模板，以便以某种方式直接使用AngularJS？提前谢谢......

HTML5和angularJS只有条件模板解决方案可能（没有ComponentOne pricetag）？

0 个答案: