easyui实现可编辑表格

最新推荐文章于 2025-08-16 11:04:53 发布

原创

最新推荐文章于 2025-08-16 11:04:53 发布 · 2.6k 阅读

本文记录了如何使用EasyUI实现一个可编辑表格的前端功能，用于小区店铺的分账管理。需求包括多条数据编辑、商家类型账号的唯一性、下拉选择账号类型、积分分配逻辑等。大部分验证和限制逻辑放在后端处理，文中并未详述后端代码。

前端能力比较差，所以记录下，方便以后翻阅。

需求

为小区店铺开发一个分账管理的功能，小区业主在店铺消费时返还消费金额一定比例的积分。要求如下：

1）、可编辑表格，可以编辑多条数据，之后一起提交给后端；

2）、只能有一个商家类型的账号，在申请店铺时创建，此处不可以删除，只能修改分账比例；

3）、账号类型为下拉单选框；

4）、业主不需要输入手机号和分账账号，直接将积分分配到某app上；

5）、分账比例两位小数，总和为100%。

实现

1、入口

<a href="#" name="deta" onclick="openBillManagementPage('+ rec.shopId + ');return false;">分账管理</a>

2、页面

     <!-- 分账管理 -->
    <div id="editBillManagement" class="easyui-window" data-options="title:'分账管理',iconCls:'icon-edit',modal:true,collapsible:false,minimizable:false,closed:true"
        style="width: 820px; height: 450px; padding: 5px;">
        <div class="easyui-layout" data-options="fit:true">
            <!-- <input type="hidden" id ="edit_bill_shopId" name="shopId"/> -->
            <div data-options="region:'north',border:false" style="text-align: left; padding: 3px; height: 38px">
                <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="addBillRow()">添加分账方</a>
            </div>
            <div data-options="region:'center',border:false" style="padding: 10px; background: #fff; border: 1px solid #ccc;">
                <table id="billAccountGrid"></table>
            </div>
             <div data-options="region:'south',border:false" style="text-align: right; padding: 5px 0; height: 40px">
                <a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" href="javascript:void(0)" 
                    onclick="ja