优化

src/main/resources/static/js/mz/yj_item_entry.js

@@ -1,4 +1,14 @@
 //@ sourceURL=refund_medicine.js
+var rightData = [
+    {id: 1, name: '张三', gender: '男', email: 'zhangsan@example.com', department: '技术部'},
+    {id: 2, name: '李四', gender: '男', email: 'lisi@example.com', department: '市场部'},
+    {id: 3, name: '王五', gender: '男', email: 'wangwu@example.com', department: '人事部'},
+    {id: 4, name: '赵六', gender: '男', email: 'zhaoliu@example.com', department: '财务部'},
+    {id: 5, name: '钱七', gender: '女', email: 'qianqi@example.com', department: '技术部'},
+    {id: 6, name: '孙八', gender: '女', email: 'sunba@example.com', department: '市场部'},
+    {id: 7, name: '周九', gender: '女', email: 'zhoujiu@example.com', department: '人事部'},
+    {id: 8, name: '吴十', gender: '女', email: 'wushi@example.com', department: '财务部'}
+];
 $(function () {
 
     initSearchList('<div id="yjksPopoverContent"><table id="tb_table_yjksItem"></table></div>',
@@ -6,9 +16,79 @@ $(function () {
     $('#yjksItem').on('input focus', function (e) {
         loadItemTbale(null)
     });
-
+    loadRightTable()
 });
 
+function deldata(index) {
+    console.log('删除row.id=',index)
+    rightData.splice(index,1)
+    console.log('rightData',rightData)
+    loadRightTable()
+}
+
+
+function loadRightTable() {
+    $('#dataTable').bootstrapTable('destroy');
+    // 初始化表格
+    $('#dataTable').bootstrapTable({
+        data: rightData,
+        toolbar: '#toolbar',                //工具按钮用哪个容器
+        striped: true,
+        cache: true,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
+        pagination: false,                   //是否显示分页（*）
+        sortable: true,                     //是否启用排序
+        sortOrder: "asc",
+        pageNumber: 1,                       //初始化加载第一页，默认第一页
+        pageSize: 5,                       //每页的记录行数（*）
+        pageList: [5, 10, 25, 50, 100],        //可供选择的每页的行数（*）
+        search: false,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
+        strictSearch: true,
+        showColumns: false,                  //是否显示所有的列
+        showRefresh: false,                  //是否显示刷新按钮
+        minimumCountColumns: 2,             //最少允许的列数
+        clickToSelect: true,                //是否启用点击选中行
+        uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
+        showToggle: false,                    //是否显示详细视图和列表视图的切换按钮
+        cardView: false,                    //是否显示详细视图
+        detailView: false,
+        columns: [
+            {
+                title: '操作',
+                field: 'op',
+                align: "center",
+                valign: 'middle',
+                formatter: function (value, row, index) {
+                    var str = '<button type="button" class="btn btn-primary  btn-sm" onclick=deldata(' + index + ')>删除</button>';
+                    return [str].join('');
+                }
+            },
+            {
+                field: 'id',
+                title: '编码',
+                align: "center",
+                valign: 'middle',
+            }, {
+                field: 'name',
+                title: '名称',
+                align: "center",
+                valign: 'middle',
+            }
+            , {
+                field: 'gender',
+                title: '执行科室',
+                align: "center",
+                valign: 'middle',
+            },
+            {
+                field: 'department',
+                title: '规格',
+                align: "center",
+                valign: 'middle',
+            }
+        ],
+    });
+}
+
 
 function loadItemTbale(event) {
     if (event != null) {

src/main/resources/templates/mz/yj_item_entry.html

@@ -85,40 +85,7 @@
                     </div>
                 </div>
                 <div class="col-md-6 col-sm-6 col-xs-12">
-                    <table id="tb_table_right" class="table table-striped table-bordered">
-                        <thead>
-                            <tr>
-                                <td>序号</td>
-                                <td>项目编码</td>
-                                <td>项目名称</td>
-                                <td>规格</td>
-                                <td>单位</td>
-                                <td>单价</td>
-                                <td>单量</td>
-                                <td>天数</td>
-                                <td>总量</td>
-                                <td>总价</td>
-                                <td>执行科室</td>
-                                <td>操作</td>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>1</td>
-                                <td>123</td>
-                                <td>456</td>
-                                <td>规格</td>
-                                <td>单位</td>
-                                <td>单价</td>
-                                <td>单量</td>
-                                <td>天数</td>
-                                <td>总量</td>
-                                <td>总价</td>
-                                <td>执行科室</td>
-                                <td><button type="button" class="btn btn-danger" >删除</button></td>
-                            </tr>
-                        </tbody>
-                    </table>
+                    <table id="dataTable"></table>
                 </div>
             </div>
         </div>