CURD窗口修改固定行的功能，增加固定列的功能。

public/index-release.html

@@ -29,6 +29,7 @@
 	<link nonce="*NONCE_TOKEN_CSS*" rel="stylesheet" type="text/css" href="../static/css/jQuery.resizableColumns.css">
 	<link nonce="*NONCE_TOKEN_CSS*" rel="stylesheet" type="text/css" href="../static/css/jquery.treegrid.css">
 	<!-- <link rel="stylesheet" type="text/css" media="screen" href="../static/plugin/converse_7.0.4/dist/converse.min.css"> -->
+	<link nonce="*NONCE_TOKEN_CSS*" rel="stylesheet" type="text/css" href="./api/file/getThemeCss">
 
 
 

src/window1/tabGridView/GridBody.vue

@@ -1,11 +1,11 @@
 <template>
   <tr v-if="showTabGridTitleFields" height="40px" :style="{ 'background-color': warningColor }" :class="{ 'warning': isSelected }">
-    <td rowspan="2">{{ serialNumber }}</td>
-    <td rowspan="2" class="text-center">
+    <td rowspan="2" class="sticky-col">{{ serialNumber }}</td>
+    <td rowspan="2" class="text-center sticky-col" style="left:50px">
       <input v-model="isSelected" autocomplete="off" type="checkbox" @click="clickModelData(modelData)" />
     </td>
 
-    <td v-if="isShowEdit == undefined || isShowEdit" rowspan="2">
+    <td v-if="isShowEdit == undefined || isShowEdit" rowspan="2" class="sticky-col" style="left:80px">
       <template v-if="showEditButton">
         <span class="operation-delete" aria-hidden="true" @click="editRecord">
           <i class="fa" :class="{ 'fa-pencil': !modelData.editMode, 'fa-check': modelData.editMode }" />
@@ -29,7 +29,7 @@
             <CellItem
               v-else :ref="'cellItem' + index" :scroll-object="scrollObject" :field-item="tabGridTitleField"
               :model-data="modelData" :parent-model-data="parentModelData" :class-name="className" :window-no="windowNo"
-              :tab-index="tabIndex" style="display: inline-block;"
+              :tab-index="tabIndex" style="display: inline-block; min-width: 200px;"
               :class="{ 'table-cell-searchwidget': fieldUtil.isSearchType(tabGridTitleField) }"
               @value-changed="valueChanged($event, tabGridTitleField)"
               @execute-callout="executeCallout(tabGridTitleField)"
@@ -41,12 +41,12 @@
   </tr>
   <tr :style="{ 'background-color': warningColor }" :class="{ 'warning': isSelected }" height="40px">
     <template v-if="!showTabGridTitleFields">
-      <td>{{ serialNumber }}</td>
-      <td class="text-center">
+      <td class="sticky-col">{{ serialNumber }}</td>
+      <td class="text-center sticky-col" style="left:50px">
         <input v-model="isSelected" autocomplete="off" type="checkbox" @click="clickModelData(modelData)" />
       </td>
 
-      <td v-if="isShowEdit == undefined || isShowEdit">
+      <td v-if="isShowEdit == undefined || isShowEdit" class="sticky-col" style="left:80px">
         <template v-if="showEditButton">
           <span class="operation-delete" aria-hidden="true" @click="editRecord">
             <i class="fa" :class="{ 'fa-pencil': !modelData.editMode, 'fa-check': modelData.editMode }" />
@@ -431,4 +431,14 @@ export default {
   margin-left: 5px;
   margin-right: 10px;
 }
+
+
+/* 固定列 */
+.sticky-col {
+  position: -webkit-sticky; /* Safari */
+  position: sticky;
+  left: 0;
+  background: #fafafa;
+  z-index: 1; /* 确保固定列在其他内容之上 */
+}
 </style>

src/window1/tabGridView/GridHeader.vue

@@ -1,24 +1,24 @@
 <template>
-  <tr>
+  <tr class="sticky-row">
     <th
       v-if="$i18n.locale === 'zh-CN'"
-      class="text-center"
+      class="text-center sticky-col"
       width="50px"
     >
       <div>{{ $t('lang.gridHeader.serialNumber') }}</div>
     </th>
     <th
       v-else
-      class="text-center"
+      class="text-center sticky-col"
       width="100px"
     >
       <div>{{ $t('lang.gridHeader.serialNumber') }}</div>
     </th>
     <th
-      class="text-center"
+      class="text-center sticky-col"
       width="30px"
       :class="{'mulitiple-select': multipleSelect}"
-      @click.self="changeSelectMode"
+      style="left:50px" @click.self="changeSelectMode"
     >
       <input
         v-model="isSelectAll"
@@ -29,8 +29,9 @@
     </th>
     <th
       v-if="isShowEdit == undefined || isShowEdit"
-      class="text-center"
+      class="text-center sticky-col"
       width="95px"
+      style="left:80px"
     >
       <div>
         {{ $t('lang.gridHeader.operate') }}
@@ -284,8 +285,8 @@ th {
 
 
 <style scoped>
-table.fixed-table th {
-    position: relative;
+table.curd-table th {
+    /* position: relative; */
     min-width: 25px;
 }
 
@@ -304,7 +305,7 @@ table th {
     background-color: #f8f8f8;
 }
 
-table.fixed-table th .rz-handle {
+table.curd-table th .rz-handle {
     width: 10px;
     height: 100%;
     position: absolute;
@@ -313,7 +314,7 @@ table.fixed-table th .rz-handle {
     cursor: ew-resize !important;
 }
 
-table.fixed-table th .rz-handle.rz-handle-active {
+table.curd-table th .rz-handle.rz-handle-active {
     border-right: 2px solid #000;
     transform: scaleX(100);
     background: rgba(0, 0, 0, 0.05) 2px;
@@ -322,4 +323,23 @@ table.fixed-table th .rz-handle.rz-handle-active {
 .rz-handle:hover {
     background: rgba(0, 0, 0, 0.2) 4px;
 }
+
+
+/* 固定列 */
+.sticky-col {
+  position: -webkit-sticky; /* Safari */
+  position: sticky;
+  left: 0;
+  background: #fafafa;
+  z-index: 1; /* 确保固定列在其他内容之上 */
+}
+
+/* 固定行 */
+.sticky-row {
+  position: -webkit-sticky; /* Safari */
+  position: sticky;
+  top: 0;
+  background: #fafafa;
+  z-index: 2; /* 确保固定列在其他内容之上 */
+}
 </style>

src/window1/tabGridView/SubTabGridEdit.vue

@@ -90,8 +90,7 @@
             >
               <div :id="scrollObject.tableOutDivUuid2" ref="tableContainer2">
                 <table
-                  id="fixedTbody"
-                  class="fixed-table table-striped table-bordered float-table"
+                  class="curd-table table-striped table-bordered float-table"
                   :width="tableWidth"
                 >
                   <thead>

src/window1/tabGridView/TabGridEdit.vue

@@ -47,7 +47,7 @@
         <div v-if="tab != null && tab.tabGridView != null">
           <div :id="scrollObject.tableOutDivUuid1" ref="tableContainer1" style="padding-left: 0px">
             <div :id="scrollObject.tableOutDivUuid2" ref="tableContainer2">
-              <table id="fixedTbody" class="fixed-table table-striped table-bordered" :width="tableWidth">
+              <table class="curd-table table-striped table-bordered" :width="tableWidth">
                 <thead>
                   <GridHeader
                     :is-show-edit="!tab.tabDataSource.readOnly" :tab-grid-fields="tabGridFields"
@@ -787,8 +787,6 @@ export default {
 
           _self.loading = false;
           _self.refreshCommand = false;
-
-          _self.fixedTableHeader();
         },
         function () {
           _self.loading = false;
@@ -1743,19 +1741,6 @@ export default {
       }
     },
 
-    /**
-     * 冻结表头
-     */
-    fixedTableHeader: function () {
-      let _self = this;
-      _self.$nextTick(function () {
-        var $th = $('.tableFixHead').find('thead');
-        $('.tableFixHead').on('scroll', function () {
-          $th.css('transform', 'translateY(' + this.scrollTop + 'px)');
-        });
-      });
-    },
-
     backupView: function () {
       let _self = this;
       // 请勿修改，会影响生单的功能