80 lines
2.2 KiB
HTML
80 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>DataGrid 单行编辑 + wdatepicker 示例</title>
|
|
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
|
|
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
|
|
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
|
|
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
|
|
<script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
|
|
|
|
<style>
|
|
.datagrid-editable .textbox{ width:100% !important; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h3>DataGrid 单行编辑 + wdatepicker</h3>
|
|
|
|
<table id="dg" class="easyui-datagrid" style="width:700px;height:400px"
|
|
data-options="
|
|
singleSelect:true,
|
|
idField:'id',
|
|
onClickRow: onClickRow
|
|
">
|
|
<thead>
|
|
<tr>
|
|
<th field="id" width="50">ID</th>
|
|
<th field="name" width="150" editor="text">Name</th>
|
|
<th field="birth" width="120" editor="wdatepicker">出生日期</th>
|
|
<th field="score" width="100" editor="numberbox">Score</th>
|
|
</tr>
|
|
</thead>
|
|
</table>
|
|
|
|
<div style="margin-top:10px;">
|
|
<a href="javascript:endEditRow()" class="easyui-linkbutton">保存当前行</a>
|
|
</div>
|
|
|
|
<script>
|
|
var editIndex = undefined;
|
|
|
|
// 初始化 datagrid 数据
|
|
$('#dg').datagrid({
|
|
data: [
|
|
{id:1, name:'张三', birth:'1990-01-01', score:80},
|
|
{id:2, name:'李四', birth:'1992-03-15', score:90},
|
|
{id:3, name:'王五', birth:'1988-07-20', score:75}
|
|
]
|
|
});
|
|
|
|
// 点击行进入编辑状态
|
|
function onClickRow(index,row){
|
|
if(editIndex !== index){
|
|
if(endEditRow()){
|
|
$('#dg').datagrid('beginEdit', index);
|
|
editIndex = index;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 保存当前行
|
|
function endEditRow(){
|
|
if(editIndex === undefined){ return true; }
|
|
if($('#dg').datagrid('validateRow', editIndex)){
|
|
$('#dg').datagrid('endEdit', editIndex);
|
|
editIndex = undefined;
|
|
return true;
|
|
} else {
|
|
alert('请填写完整数据');
|
|
return false;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|