在这种情况下,我正在尝试优化用于计算财务报告的表(有点类似于excel)。可怕的是整个表结构存储在服务器上,包括甚至rowspan和td colspan。所以它产生了3000个细胞,一旦与观察者结合。我们在4GB内存,i3处理器笔记本电脑上使用IE 10进行测试,你知道发生了什么。我试图尽可能多地用一次性绑定替换一些绑定,我写了一个动态创建最小单元格内容的指令,并且我试图避免使用隔离范围指令。所有这些方法都没有多大帮助。可以给出一些建议,我还可以用它做什么?非常感谢!
<table id="main_table_{{uitab.id}}"
class="table_new_style table table-new-border"
style="table-layout: fixed; margin-bottom: 0;"
ng-style="{'width':uitab.table.width?uitab.table.width+'px':'100%'}">
<thead>
<tr ng-repeat="uiheadrow in uitab.table.thead.headRows" style = "height:0px;">
<th ng-repeat="uiheadcell in uiheadrow.headCells"
ng-hide="uiheadcell.hide"
ng-attr-rowspan="{{uiheadcell.rowspan}}"
ng-attr-colspan="{{uiheadcell.colspan}}"
style="padding:0;border:0;height:0px;"
ng-style="{'width':uiheadcell.width+'%'}">
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="uirow in uitab.table.tbody.rows |filter:uitab.table.filterChoose"
ng-init="rowIndex = $index+1;"
ng-hide="uirow.del||uirow.hide" ng-post-repeat-directive
>
<!-- style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
'nowrap':uicell.nowrap,
-->
<td
ng-class="{'invalide':uicell.invalide}"
ng-repeat="uicell in uirow.cells"
ng-hide="uicell.hide"
ng-style="{'text-align':uicell.align}"
ng-attr-colspan="{{uicell.colspan}}"
ng-attr-rowspan="{{uicell.rowspan}}"
ng-dblclick="editTextArea(uicell)"
>
<input type="checkbox" ng-if="uicell.dataType=='checkbox'"
ng-model="uirow.checked"> <!-- <div class="checkbox" ng-if="uicell.dataType=='checkbox'">
<label>
<input type="checkbox" ng-checked="uicell.checked">{{uicell.label}}
</label>
</div> --> <!-- ng-disabled="uirow.id" --> <select
style="width: 100%;position: relative;z-index: 1;"
onchange="window.changeflag=true"
ng-class="{'font-bold-row':uicell.font.bold}"
ng-focus="inputFocus(uicell)"
ng-blur="uicell.validate();exeFuncs(uitab)"
ng-if="(uicell.dataType=='select'&&!uicell.custom&&!uirow.id)"
ng-model="uicell.value"
ng-options="option.value as option.name for option in uicell.options">
</select> <input
id="{{'select_'+uitab.id+'_'+uirow.rowIndex+'_'+uicell.colIndex}}"
ng-if="(uicell.dataType=='select'&&uicell.custom&&!uirow.id)||uicell.writeable"
ng-class="{'font-bold-row':uicell.font.bold}"
onchange="window.changeflag=true"
ng-focus="inputFocus(uicell)"
ng-blur="uicell.validate();exeFuncs(uitab)" placeholder="请选择"
style="width: 100%;" type="text" ng-select
ng-select-topoffset="{{uimodule.tabs.length==1?30:0}}"
ng-select-cell="uicell" ng-model="uicell.selectname" /> <span
ng-if="(uicell.dataType=='select'&&uirow.id)&&!uicell.writeable"
ng-class="{'font-bold-row':uicell.font.bold}"
ng-repeat="option in uicell.options|filter:uicell.value">{{option.name}}</span>
<span ng-if="uicell.dataType=='label'"
ng-class="{'font-bold-row':uicell.font.bold}">{{uicell.value}}{{uicell.serial?rowIndex:''}}</span>
<a
ng-href="/download.sword?ctrl=DemoCtrl_downloadallfile&mbpath={{uicell.value}}{{getAuditParams()}}"
ng-class="{'font-bold-row':uicell.font.bold}"
ng-if="uicell.dataType=='href'&&uicell.value"
style="font-weight: bold;" target="_blank">{{uirow.data[uicell.labelProperty]}}</a>
<span ng-if="uicell.dataType=='href'&&!uicell.value"
ng-class="{'font-bold-row':uicell.font.bold}">{{uirow.data[uicell.labelProperty]}}</span>
<a
href="javascript:;"
ng-class="{'font-bold-row':uicell.font.bold}"
ng-click="showDialog(uicell, uirow)"
ng-if="((uicell.dataType=='dialog'&&(uirow.data[uicell.dataSource])) || ((uicell.dataType=='TAB') && uicell.href != '' && uicell.href != '/'))"
style="font-weight: bold;">{{uirow.data[uicell.labelProperty]}}</a>
<span ng-if="((uicell.dataType=='dialog'&&!(uirow.data[uicell.dataSource])) || ((uicell.dataType=='TAB') && (uicell.href == '' || uicell.href == '/')))"
ng-class="{'font-bold-row':uicell.font.bold}">{{uirow.data[uicell.labelProperty]}}</span>
<input ng-if="uicell.dataType=='text'"
ng-class="{'font-bold-row':uicell.font.bold}"
ng-focus="inputFocus(uicell)"
ng-blur="uicell.validate();exeFuncs(uitab)"
onchange="window.changeflag=true"
ng-paste-text ng-paste-cell='uicell' ng-paste-row='uirow' ng-paste-table="uitab.table.tbody" ng-paste-tab="uitab"
style="width: 100%;" type="text" ng-model="uicell.value" /> <!-- ng-click="editTextArea(uicell.value)" -->
<div ng-if="uicell.dataType=='disable'">
<span ng-if="uicell.value">{{uicell.value}}</span> <span
ng-if="!uicell.value">---</span>
</div>
<!-- ng-autotextarea -->
<div ng-if="uicell.dataType=='textarea'" ng-attr-id="{{uitab.id+'_'+uirow.rowIndex+'_'+uicell.colIndex}}"
ng-class="{'font-bold-row':uicell.font.bold}"
style="outline:none;position: relative;z-index: 1;margin: 3px;min-height:16px;white-space:normal;word-break:break-all;word-wrap:break-word; "
ng-bind-html="getTextareaDivText(uicell.value)"
ng-paste-text ng-paste-cell='uicell' ng-paste-row='uirow' ng-paste-table="uitab.table.tbody" ng-paste-tab="uitab"
contenteditable="true" ng-model="uicell.value"
>
</div>
<!-- <div
ng-if="uicell.dataType=='textarea'"
style="margin: 3px;"
>
<textarea
ng-focus="inputFocus(uicell)"
ng-class="{'font-bold-row':uicell.font.bold}"
ng-blur="uicell.validate()"
ng-click="editTextArea(uicell)"
onchange="window.changeflag=true"
readonly="readonly"
ng-style="{'height':getTextAreaHeight(uirow)+'px'}"
style="width:100%;resize: none;overflow: hidden;"
ng-model="uicell.value"></textarea>
</div> -->
<!-- <div ng-if="uicell.dataType=='textarea2'">
<div style="margin-top: 6px; float: right; width: 30px;"
ng-if="uicell.showEditBtn">
<a ng-click="editTextArea(uicell)"
ng-class="{'font-bold-row':uicell.font.bold}"
href="javascript:;"><i class="primary icon-zoom-in"></i></a>
</div>
<div
style="width: auto;">
<textarea ng-focus="inputFocus(uicell)"
ng-class="{'font-bold-row':uicell.font.bold}"
ng-blur="uicell.validate()"
ng-dblclick="editTextArea(uicell)"
onchange="window.changeflag=true"
ng-style="{'overflow-y':uicell.height>16?'auto':'hidden','height':uicell.height+'px'}"
style="width:100%;resize: none;overflow: hidden;"
ng-style="{'height':getTextAreaHeight(uicell)+'px'}"
ng-change="resetTextAreaHeight(uicell)"
ng-model="uicell.value"></textarea>
ng-keyup="resetTextAreaHeightOnKeyup($event,uicell)"
ng-style="{'height':uicell.height+'px'}"
<textarea ng-focus="inputFocus(uicell)"
ng-class="{'font-bold-row':uicell.font.bold}"
ng-blur="uicell.validate()"
ng-dblclick="editTextArea(uicell)"
onchange="window.changeflag=true"
ng-autotextarea
readonly="readonly"
onpaste="myFunction(event)"
style="width:100%;resize: none;overflow: hidden;height:16px;"
ng-model="uicell.value"></textarea>
<div
ng-blur="uicell.validate()"
ng-dblclick="editTextArea(uicell)"
class="test_box"
readonly="readonly"
oninput="window.changeflag=true;"
ng-model="uicell.value"
>{{uicell.value}}</div>
</div>
</div> -->
<div ng-if="uicell.dataType=='upload'&&uirow.id&&uicell.haveCjmbFlag&&uitab.id!='10101-1'&&uitab.id!='10101-2'
&&uitab.id!='10101-3'&&uitab.id!='10201-1'&&uitab.id!='10201-2'&&uitab.id!='10201-3'&&uitab.id!='10201-3'&&uitab.id!='10301-1'">
<a ng-show="uicell.ftjlURL"
href="javascript:;"
ng-click="openFtjl(uicell.ftjlURL)">访谈</a>
<a href="javascript:;"
ng-fileupload-url="{{uicell.uploadUrl}}"
ng-fileupload-param='{"xmid":"{{xmid}}","cjbddm":"{{cjbddm}}","cjbgdm":"{{uitab.id}}","cjmxdm":"{{uirow.data.cjmxdm}}"}'
ng-fileupload-cell='uicell' ng-fileupload-row='uirow'
ng-fileupload-template='{{uirow.data[uicell.templateProperty]}}'
ng-fileupload>上传</a> <a ng-show="uicell.value"
href="javascript:;"
ng-click="viewFile(uirow.data.cjmxdm,uicell.isRefXm)">预览({{uirow.data.fjsl}})</a>
<a ng-show="uicell.value" href="javascript:;"
ng-click="delFile(uirow.data.cjmxdm,uicell,uirow)">删除</a>
</div>
<div ng-if="uicell.dataType=='upload'&&uirow.id&&!uicell.haveCjmbFlag">
<a href="javascript:;"
ng-fileupload-url="{{uicell.uploadUrl}}"
ng-fileupload-param='{"xmid":"{{xmid}}","cjbddm":"{{cjbddm}}","cjbgdm":"{{uitab.id}}","cjmxdm":"{{uirow.data.cjmxdm}}"}'
ng-fileupload-cell='uicell' ng-fileupload-row='uirow'
ng-fileupload-template='{{uirow.data[uicell.templateProperty]}}'
ng-fileupload>上传</a> <a ng-show="uicell.value"
href="javascript:;" ng-click="viewFile(uirow.data.cjmxdm,uicell.isRefXm)">预览({{uirow.data.fjsl}})</a>
<a ng-show="uicell.value" href="javascript:;"
ng-click="delFile(uirow.data.cjmxdm,uicell,uirow)">删除</a>
</div>
<div ng-if="uicell.dataType=='upload'&&uirow.id&&uicell.haveCjmbFlag&&(uitab.id=='10101-1'||uitab.id=='10101-2'
||uitab.id=='10101-3'||uitab.id=='10201-1'||uitab.id=='10201-2'||uitab.id=='10201-3'||uitab.id=='10201-3'||uitab.id=='10301-1')">
<a href="javascript:;"
ng-fileupload-url="{{uicell.uploadUrl}}"
ng-fileupload-param='{"xmid":"{{xmid}}","cjbddm":"{{cjbddm}}","cjbgdm":"{{uitab.id}}","cjmxdm":"{{uirow.data.cjmxdm}}"}'
ng-fileupload-cell='uicell' ng-fileupload-row='uirow'
ng-fileupload-template='{{uirow.data[uicell.templateProperty]}}'
ng-fileupload>上传</a> <a ng-show="uicell.value"
href="javascript:;"
ng-click="viewFile(uirow.data.cjmxdm,uicell.isRefXm)">预览({{uirow.data.fjsl}})</a>
<a ng-show="uicell.value" href="javascript:;"
ng-click="delFile(uirow.data.cjmxdm,uicell)">删除</a>
<a ng-href="/download.sword?ctrl=DemoCtrl_downloadallfile&mbpath={{uicell.cjmbFileUrl}}{{getAuditParams()}}"
target="_blank">模板</a>
</div>
<div ng-if="uicell.dataType=='upload'&&!uirow.id">
<a href="javascript:;" ng-click="exeCommand({action:'saveRow',tabid:uitab.id},uirow)">保存</a>
</div>
<div ng-if="uicell.dataType=='fileselect'">
<a href="javascript:;" ng-click="fileSelect(uirow.id)">获取</a>
<a ng-show="uicell.value" href="javascript:;"
ng-click="viewFile(uirow.id)">预览</a>
</div> <input ng-if="uicell.dataType=='number'"
onchange="window.changeflag=true"
ng-class="{'font-bold-row':uicell.font.bold}"
ng-init="numberCellChange(uitab,$index);numberInit(uicell);"
ng-focus="inputFocus(uicell)"
ng-paste-text ng-paste-cell='uicell' ng-paste-row='uirow' ng-paste-table="uitab.table.tbody" ng-paste-tab="uitab"
ng-blur="uicell.validate();exeFuncs(uitab,uicell,uirow.rowIndex,$index);sumRowRefresh(uitab);changeReport(uitab)"
style="width: 100%; text-align: right;" type="text"
ng-model="uicell.value" /> <!-- ng-class="{'font-bold-row',uitab.table.fontBoldRows&&uitab.table.fontBoldRows.indexOf($index)>=0}" -->
<input ng-if="uicell.dataType=='datetime'"
onchange="window.changeflag=true"
ng-focus="inputFocus(uicell)"
ng-blur="uicell.validate();exeFuncs(uitab)"
ng-class="{'font-bold-row':uicell.font.bold}"
ng-format="{{uicell.format}}" type="text" ng-datetimepicker
ng-timepicker="{{uicell.timepicker}}"
style="width: 100%;" ng-model="uicell.value"
class="l_member_date"
ng-paste-text ng-paste-cell="uicell" ng-paste-row="uirow" ng-paste-table="uitab.table.tbody" ng-paste-tab="uitab">
</td>
</tr>
<tr ng-if="uitab.table.sumRow"
style="height: 28px; color: #858585;">
<td style="padding: 10px 9px; font-size: 14px;"
ng-repeat="col in uitab.table.columns" ng-hide="col.hide"
ng-style="{'text-align':col.align}"><span
ng-if="$index==0">合计</span> <span
ng-if="$index!=0&&!col.sumCol">――</span> <span
ng-if="$index!=0&&col.sumCol">{{col.sum}}</span></td>
</tr>
</tbody>
</table>