npm - 让 devextreme dataGrid 与 webpack 一起工作
问题描述
我只是想让一个简单的演示应用程序使用 webpack 和 devextreme 组件工作。我首先在没有 webpack 的情况下构建了应用程序,并且一切正常。我现在正在尝试重构它以使用 webpack。我无法让 dataGrid 页面工作 我只是收到控制台错误 .dxDataGrid 不是函数。如果有人能看到我哪里出错了,任何想法都会很棒。
var $ = require('jquery');
var ko = require('knockout');
require('devextreme/integration/knockout');
require('devextreme/ui/data_grid');
require('devextreme/ui/form');
require('devextreme/ui/text_box');
require('devextreme/ui/button');
require('devextreme/ui/check_box');
require('devextreme/ui/popup');
var AspNetData = require('devextreme-aspnet-data/js/dx.aspnet.data');
$(function () {
var url = CONST_URL + 'Login/';
$("#userGrid").dxDataGrid({
showColumnLines: false,
showRowLines: true,
rowAlternationEnabled: true,
columnHidingEnabled: true,
showBorders: true,
dataSource: AspNetData.createStore({
key: "id",
loadUrl: url + "GetUsers",
insertUrl: url + "UpsertUser",
updateUrl: url + "UpsertUser",
deleteUrl: url + "DeleteUser"
}),
columnChooser: {
//enabled: true,
//mode: "select"
},
paging: {
pageSize: 5
},
pager: {
showPageSizeSelector: true,
//allowedPageSizes: [5, 10, 15],
showInfo: true
},
editing: {
allowUpdating: true,
mode: "form",
allowAdding: true,
allowDeleting: true
},
columns: [
{
dataField: "id",
caption: "User ID",
formItem: {
visible: false
},
hidingPriority: 1
},
{
dataField: "username",
caption: "Username",
validationRules: [{
type: "required",
message: "Username"
}, {
type: 'pattern',
pattern: /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/,
message: 'Please supply a valid email address.'
}],
formItem: {
visible: true
},
hidingPriority: 3
},
{
dataField: "password",
caption: "password",
mode: "password",
validationRules: [{
type: "required",
message: "Password",
}, {
type: "stringLength",
min: 8,
message: "Your password must have at least 8 characters."
}],
visible: false,
formItem: {
visible: true
}
},
{
dataField: "date_created",
caption: "Date Created",
formItem: {
visible: false
},
hidingPriority: 2
},
{
dataField: "is_locked",
caption: "User Locked Out",
hidingPriority: 0
}],
onEditorPreparing: function (e) {
if (e.dataField === "password") {
e.editorOptions.mode = 'password';
}
if (e.parentType === "dataRow" && e.dataField === "username") {
setTimeout(function () { $(e.editorElement).dxTextBox("focus") }, 100);
}
},
onToolbarPreparing: function (e) {
var dataGrid = e.component;
e.toolbarOptions.items.unshift({
location: "before",
template: function () {
return $("<div/>")
.append(
$("<h2 />")
.text("User List")
);
}
});
},
onEditingStart: function (e) {
isUpdateCanceled = false;
e.component.columnOption("date_created", "allowEditing", false);
e.component.columnOption("id", "allowEditing", false);
},
onInitNewRow: function (e) {
isUpdateCanceled = false;
e.component.columnOption("date_created", "allowEditing", false);
e.component.columnOption("id", "allowEditing", false);
e.component.columnOption("is_locked", "allowEditing", false);
},
onContentReady: function (e) {
var saveButton = $(".dx-button[aria-label='Save']");
if (saveButton.length > 0)
saveButton.click(function (event) {
console.log(e.component);
if (!isUpdateCanceled) {
upsert(e.component);
event.stopPropagation();
}
});
}
});
});
解决方案
Devexpress 团队给了我解决方案。我想我会把它贴在这里,以防其他人有同样的问题。我错过了 jquery 集成。
要求('devextreme/集成/jquery');
推荐阅读
- javascript - Discord.js - ReferenceError:未定义连接
- java - 使用 JIB 生成图像并在 GitLab CI 上使用 docker 推送时遇到问题
- terraform - 来自一个 Git 存储库的多个 terraform 环境?
- node.js - Typeorm 无法连接到 Postgres
- android - 如何将预编译的二进制文件集成到 AOSP Android 构建中?
- python - 从 NCBI 网页中提取特定的 Fasta 数据
- arrays - 我无法从对象中获取值。获取未定义的对象错误
- python - 使用 Python splitlines() 将文本文件转换为列表,同时还将一些行组合成列表中的单个项目
- php - php-express - 如何查找服务器信息
- c# - winspool.Drv ClosePrinter 实际上并没有打印,但我可以在队列中看到它 c#