我正在使用syncfusion网格来显示请假记录。有字段 - 出勤日期,修改时间,修改时间,主题,记录正规化的原因。我指定了数据类型,e-editType =" datepicker"对于出勤日期,它在记录编辑和显示时正常工作。但是,为了及时修改和修改时间,我已经指定了e-editType =" timepicker"并且它不会在记录编辑时渲染时间戳。我正在使用angularjs.Here是我的代码,
regularization.html
<div ng-controller="regularization_controller">
<div>
<h2>Regularisation Details
</div>
<div>
<div ej-grid id="Grid" e-width="500px" e-datasource="data" e-columns="columns" e-allowpaging="true" e-editsettings-enablerowhover="true" e-editsettings-allowadding="true" e-editsettings-allowediting="true" e-editsettings-rowposition="bottom"
e-editsettings-allowdeleting="true" e-editsettings-allowresizing="true" e-editsettings-showconfirmdialog="false" e-editsettings-editmode="mode"
e-toolbarsettings-showtoolbar="true" e-toolbarsettings-toolbaritems="tools" e-locale="es-ES">
<div e-columns>
<div e-column e-field="sr" e-headertext="Sr.No." e-width="60px" e-isprimarykey="true" e-textalign="left"></div>
<div e-column e-field="attendance_date" e-width="160px" e-editType="datepicker" e-headertext="Attendance Date" e-textalign="center" e-format="{0:dd-MMM-yyyy}"></div>
<div e-column e-field="modified_in_time" e-width="150px" e-editType="datetimepicker" e-format="{0:dd-MMM-yyyy hh:mm tt}" e-headertext="Modified In Time" e-textalign="center"></div>
<div e-column e-field="modified_out_time" e-width="150px" e-editType="datetimepicker" e-format="{0:dd-MMM-yyyy hh:mm tt}" e-headertext="Modified Out Time" e-textalign="center"></div>
<div e-column e-field="subject" e-width="120px" e-headertext="Subject" textalign="left"></div>
<div e-column e-field="reason" e-width="120px" e-headertext="Reason" textalign="left"></div>
<div e-column e-field="status" e-headertext="Status" e-width="100px" e-edittype="dropdownedit" e-datasource="regularize_status" e-textalign="center"></div>
</div>
</div>
</div>
</div>
regularization_controller.js
app.controller('regularization_controller', function ($scope,$modal) {
$scope.data = [{ "sr": "1", "attendance_date": "25-Feb-2015", "modified_in_time": "25-Feb-2015 09:00 AM", "modified_out_time": "25-Feb-2015 09:00 PM", "subject": "xyz", "reason": "abc", "status": "Applied" }, { "sr": "2", "attendance_date": "26-Feb-2015", "modified_in_time": "25-Feb-2015 09:00 AM", "modified_out_time": "25-Feb-2015 09:00 AM", "subject": "xyz", "reason": "abc", "status": "Applied" }];
$scope.mode = ej.Grid.EditMode.Dialog;
$scope.tools = [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel];
$scope.regularize_status = [{ text: "Applied", value: "Applied" }, { text: "Discard", value: "Discard" }];
});
我哪里错了?有什么解决方案吗?请帮忙。 谢谢。
答案 0 :(得分:0)
Syncfusion网格对列具有以下默认editType
。
您可以使用dialogtemplate
功能添加自定义控件。
演示: http://js.syncfusion.com/demos/web/#!/azure/grid/Editing/Dialogonlocaldata
<强> [更新] 强>
<div id="Grid" ej-grid
e-datasource="data"
e-editsettings-editmode="dialogtemplate"
e-editsettings-dialogeditortemplateid="#template"
e-actioncomplete="onComplete">
<div e-columns>
<div e-column e-field="Hours"></div>
</div e-columns>
</div>
<强>模板强>
<script type="text/x-jsrender" id="template">
<table>
<tr>
<td>
<input type="text" name="Hours" value:{{:Hours}}/>
</td>
</tr>
</table>
</script>
<强>事件[JS] 强>
<script>
function onComplete(args){
if(args.requestType == "beginedit"||args.requestType == "add"){
$("#GridHours").ejTimepicker({ value: args.data["Hours"] });
}
}
</script>
@注意:使用对话框模板时,
中的对照edittype
属性对设置编辑器控件没有任何影响,用户自行负责在模板和渲染中提供它们它们是actioncomplete event
请参阅上面的演示,了解如何使用对话框模板。