我有一个带有数据列的剑道网格，该数据列具有自定义下拉列表过滤器(从数据源中选择该列的唯一值)。
它可以工作，但我想从 html 中提取 function(options) {...}，因为它非常不可读，并且 Visual Studio 2015 不会将代码解释为 JavaScript。
<div id="PatrolDurationRecords">
<div data-filterable='{ "mode": "row" }'
data-role='grid'
data-sortable='true'
data-bind='source: reportData.PatrolDurations, events: {excelExport: excelExportHandler}'
data-pageable='{ "pageSize": 10 }'
data-toolbar='["excel"]'
data-excel='{ "fileName": "PatrolDurations.xlsx", "allPages": "true" }'
data-columns='[
{
"field": "patrol_id_plain",
"title": "Patrol ID",
"filterable": false
},
{
"field": "location_name",
"title": "Location",
"filterable": {
cell: {
template: function (args) {
args.element.kendoDropDownList({
dataTextField: "optionText",
dataValueField: "optionValue",
valuePrimitive: true,
dataSource: {
transport: {
read:
function(options) { //<-- I want to extract this function outside of this html declaration
console.log("viewModel.reportData.PatrolDurations = ");
console.log(viewModel.reportData.PatrolDurations);
var len = viewModel.reportData.PatrolDurations.length;
var locationName;
var setObj = {};
for(var i = 0; i < len; i++)
{
locationName = viewModel.reportData.PatrolDurations[i].location_name;
setObj[locationName] = "";//not concerned with object value, we use setObj as a Set where the keys are the set values
}
var ddlOptions = [];
for(var e in setObj)
{
ddlOptions.push({
"optionText": e,
"optionValue": e
});
}
console.log("ddlOptions = ");
console.log(ddlOptions);
options.success(ddlOptions);
}
}
}
});
},
showOperators: false
}
}
},
{
"field": "company_name",
"title": "Company",
"filterable": { "cell": { "operator": "contains"}}
},
{
"field": "patrol_start",
"title": "Start",
"filterable": false
},
{
"field": "patrol_end",
"title": "End",
"filterable": false
},
{
"field": "patrol_user",
"title": "Patrolled By",
"filterable": { "cell": { "operator": "contains"}}
},
{
"field": "duration",
"title": "Duration",
"template": kendo.template($("#durationTemplate").html()),
"filterable": false
},
{
"title": "",
"template": kendo.template($("#viewLinkTemplate").html()),
"filterable": false
}
]'>
</div>
</div>
最佳答案
使用以下标准方法:
{
"field": "location_name",
"title": "Location",
"filterable": {
cell: {
template: myFunction,
showOperators: false
}
}
}
然后在其他地方定义myFunction。
<script>
function myFunction(args) {
//args.element...
}
</script>
关于javascript - 如何从声明式 kendo ui 初始化中提取 js 函数以提高可读性？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39840312/