如何加载和使用jsgrid？
如何加载和使用jsgrid？
提问于 2020-02-19 15:21:20
我对jsgrid库有意见。我试着加载它来对项目做出反应。我包括了要进行项目的库，如npmjs上的说明。
我的代码看起来：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</body>
</html>app.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
import * as JSGRID from 'jsgrid'
export default class App extends React.Component {
componentDidMount() {
window.$("#jsGrid").JSGRID.jsGrid({
width: "100%",
height: "400px",
filtering: true,
editing: true,
sorting: true,
paging: true,
fields: [
{ name: "Name", type: "text", width: 150 },
{ name: "Age", type: "number", width: 50 },
{ name: "Address", type: "text", width: 200 },
{ name: "Country", type: "select", items: 0, valueField: "Id", textField: "Name" },
{ name: "Married", type: "checkbox", title: "Is Married", sorting: false },
{ type: "control" }
]
});
}
render() {
return (
<div id="jsGrid">
</div>
);
}
}仍然有一些错误：
我在这个问题上浪费了一些时间，有没有说明如何包括这样的jquery项目来作出反应？或者有人面对这样的问题知道怎么解决。
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-02-19 16:26:21
您需要从JSGRID中删除jQuery，并且应该创建一个引用节点的ref，而不是查询它。
// change to require
require("jsgrid");
export default class App extends React.Component {
constructor(props) {
super(props);
this.gridRef = React.createRef();
}
componentDidMount() {
// remove JSGRID and use a ref
window.jQuery(this.gridRef.current).jsGrid({
width: "100%",
height: "400px",
filtering: true,
editing: true,
sorting: true,
paging: true,
fields: [
{ name: "Name", type: "text", width: 150 },
{ name: "Age", type: "number", width: 50 },
{ name: "Address", type: "text", width: 200 },
{
name: "Country",
type: "select",
items: 0,
valueField: "Id",
textField: "Name"
},
{
name: "Married",
type: "checkbox",
title: "Is Married",
sorting: false
},
{ type: "control" }
]
});
}
render() {
return <div id="jsGrid" ref={this.gridRef} />;
}
}
Stack Overflow用户
发布于 2020-02-19 15:39:58
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60303618
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号