优化大的angularjs表

时间:2017-07-27 09:28:36

标签: javascript angularjs

在这种情况下,我正在尝试优化用于计算财务报告的表(有点类似于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>

0 个答案:

没有答案