easyui 行編輯

easyui可編輯數據網絡（datagrid）

要引入js文件easyui-edatagrid.js

<script type="text/javascript"
    src="../jquery.edatagrid.js"></script>

<table id="dg" class="easyui-datagrid" style="width: 100%; height: 100%" data-options="
    toolbar:'#tbRule', 
    url:'列表數據請求地址',
    pagination:false,
    fitColumns:true, 
    singleSelect:true,
    border:false">
<thead>
    <tr>
        <th field="yearDay" width="25%" align="center"
            editor="{type:'datebox',options:{
                                valueField:'yearDay',
                                required:true
                            }
           }">日期</th>
        <th field="dayDescribe" width="50%" align="center" 
          editor="{type:'textbox',
                valueField:'dayDescribe', 
                  required:true
                 }
          }">日期描述</th>

</tr>
</thead>
</table>

點擊表格外實現自動保存

$(function() {
        $('#dg2').edatagrid({
            autoSave : true,
            updateUrl : '後臺更新地址',
            onSuccess : function(index, row) {//Fires when a row is saved successfully on the server.
                $.messager.show({
                    title : '提示',
                    msg : '保存成功',
                    timeout : 3000,
                    showType : 'slide'
                });
            },
            onError : function(index, row) {
                showError(row.msg);
            }
        });
    });