easyui中的edatagrid
一,下面是JS中的主体
function initTablList() {
$('#tbmain').edatagrid({
url: '/Team/TeamInfo/GetData/',
saveUrl: '/Team/TeamInfo/Save/',
updateUrl: '/Team/TeamInfo/Save/',
destroyUrl: '/Team/TeamInfo/Save/',
width: 530,
height: 200,
rownumbers: true,
fitColumns: true, //列自适应
idField: 'id', //主键列的列明
loadMsg: '正在加载用户的信息...', //展示着行字
pagination: false, //是否有分页
singleSelect: true, //是否单行选择
toolbar:"#toolbar",
// onLoadSuccess:test,
// 并在该页面上显示部门、工号、姓名、开始日期、结束日期、培训类别、培训内容、培训机构、费用、培训协议等。
columns: [
[
{ field: 'name', title: '名称', align: "center", width: 90, editor: { type: 'combobox',
options:{required:true, editable:false,data:
[
{'id':'1','text':'高速公路'},
{'id':'2','text':'一级公路'},
{'id':'3','text':'二级公路'},
{'id':'4','text':'三级公路'}
],
valueField: 'id',
textField: 'text'
}
}
},//此为下拉列框
{ field: 'age', title: '年龄', align: "center", width: 90, editor: { type: 'datebox', options: { required: true, editable: false}} },//此为时间选择
{ field: 'weight', title: '体重', align: "center", width: 90,editor:{type:numberbox,options:{required:true,precision:1}} },//只能输入数字
{ field: 'height', title: '身高', align: "center", width: 90,editor:{type:'validatebox',options:{required:true}}},
{ field: 'positon', title: '位置', align: "center", width: 90,editor:{type:'validatebox',options:{required:true}} },
{ field: 'avgScore', title: '均场得分', align: "center", width: 90,editor:{type:'validatebox',options:{required:true}} },
{ field: 'avgTime', title: '均场时间', align: "center", width: 90,editor:{type:'validatebox',options:{required:true}} }
]
]
});
} //初始化选择表格
二 下面是Toolbar中的html代码
<div id="toolbar">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$('#tbmain').edatagrid('addRow')">New</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$('#tbmain').edatagrid('destroyRow')">Destroy</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#tbmain').edatagrid('saveRow')">Save</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#tbmain').edatagrid('cancelRow')">Cancel</a>
</div>