您的位置:首页 > 产品设计 > UI/UE

easyui 行编辑

2016-12-19 23:40 155 查看
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);
}
});
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息