监听表格复选框选中值的方法,x搭建react开发环境的方法步骤

本文介绍了了Webpack
4.x搭建react开发环境的方法步骤,分享给大家,也给自己留个笔记

如何实现刷新当前页面呢?借助js你将无所不能。

需要达到的目的:

必要依赖一览(npm install) 安装好。

1,reload 方法,该方法强迫浏览器刷新当前页面。 语法:location.reload([bForceGet])  
参数: bForceGet, 可选参数, 默认为
false,从客户端缓存里取当前页。true, 则以 GET
方式,从服务端取最新的页面, 相当于客户端点击 F5(“刷新”)

ajax()异步请求后台时,需要传入表格里复选框选中的id值

"dependencies": {
  "babel-core": "^6.26.3",
  "babel-loader": "^7.1.5",
  "babel-preset-env": "^1.7.0",
  "react": "^16.4.2",
  "react-dom": "^16.4.2",
  "webpack": "^4.16.5"
  ...
}

2,replace
方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,你不能通过“前进”和“后退”来访问已经被替换的URL。
语法: location.replace(URL)  
通常使用: location.reload() 或者是 history.go(0) 来做。
此方法类似客户端点F5刷新页面,所以页面method=”post”时,会出现”网页过期”的提示。
因为Session的安全保护机制。
当调用 location.reload() 方法时, aspx页面此时在服务端内存里已经存在,
因此必定是 IsPostback 的。
如果有这种应用:
需要重新加载该页面,也就是说期望页面能够在服务端重新被创建,期望是 Not
IsPostback 的。
这里,location.replace()
就可以完成此任务。被replace的页面每次都在服务端重新生成。
代码: location.replace(location.href);

注意:在渲染form on
方法的done里面加入

babel系列是干什么用的呢?是为了支持es6以上的高级语法的编译。但是因为react有jsx这个东西存在,所以单纯的babel是不够的,此外要让babel作用于webpack,需要给webpack添加一个loader(以前版本叫loader,4.x版本开始改用‘rules’),在工程根目录新建webpack.config.js文件,并添加如下代码:

返回并刷新页面:

done:function(res){

 table_data=res.data;

} 
var path = require('path');
var node_modules = path.resolve(__dirname, 'node_modules');
var deps = [ 
 ];

//以上代码可以忽略,没有必要不要添加noParse,因为依赖代码中可能会有环境的判断,而浏览器中是拿不到process变量的,会报错!
var config = {
  //这里是打包的入口
 entry: path.resolve(__dirname, './react/app.js'),
 resolve: {
  alias: {
  }
 },
 //打包完成后输出到./build/bundle.js文件中
 output: {
  path: path.resolve(__dirname, './build'),
  filename: 'bundle.js',
 },
 mode: 'development',
 module: {
   //上述的规则,loader就放在这里,这段没什么好说的,从Webpack官方文档上直接拿来用
  rules: [
    {
     test: /\.js$/,
     exclude: /(node_modules|bower_components)/,
     use: {
      loader: 'babel-loader',
      options: {
        //刚刚下载的module之一
       presets: ['babel-preset-env']
      }
     }
    }
   ]
 }
};

//遍历你的自定义要排除的依赖,安装到node_modules里的依赖一般不需要排除掉
deps.forEach(function (dep) {
  var depPath = path.resolve(node_modules, dep);
  config.resolve.alias[dep.split(path.sep)[0]] = depPath;
  config.module.noParse.push(depPath);
 });

module.exports = config;

location.replace(document.referrer);
document.referrer //前一个页面的URL

将复选框选中的值的id加入数组中,然后传递到后台作为ids参数

以上代码可以直接用,请先将注释去掉。有了以上文件配置,你可以直接在package.json中添加scripts来打包你的app.js。

不要用 history.go(-1),或
history.back();来返回并刷新页面,这两种方法不会刷新页面。
附:

//自定义数组

var table_data=new Array();

var ids =new Array();

table.on('checkbox(push_port_table)', function(obj){

 if(obj.checked==true){

  if(obj.type=='one'){

  ids.push(obj.data.id);

 }else{

   for(var i=0;i<table_data.length;i++){

   ids.push(table_data[i].id);

   }

  }

 }else{

  if(obj.type=='one'){

   for(var i=0;i<ids.length;i++){

   if(ids[i]==obj.data.id){

   // ids.remove(i);用这个方法会报错not a function

   //ids.pop(); 建议用这个

    ids.splice(i,1);

   }

  }

 }else{

  for(var i=0;i<ids.length;i++){

   for(var j=0;j<table_data.length;j++){

    if(ids[i]==table_data[j].id){

    // ids.remove(i);

    // ids.pop();

    ids.splice(i,1);

    }

   }

  }

 }

 }

 console.log(ids);

 console.log(table_data);

});
...
"scripts": {
  ...
  "build-config": "webpack",
  ...
}
...

Javascript刷新页面的几种方法:

以上这篇layui
监听表格复选框选中值的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

执行npm run build-config可执行打包操作,但是目前为止还是会报错,因为缺少babel设置,webpack打包时无法识别jsx语法,什么时jsx语法?就是在js代码中写的类似于dom结构的东西,如下:

复制代码 代码如下:

您可能感兴趣的文章:

  • layer插件select选中默认值的方法
  • 解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
  • 解决layui
    复选框等内置控件不显示的问题
  • layui从数据库中获取复选框的值并默认选中方法
...
<h1 onClick={this.handleClick.bind(this)} style={{ color: "red" }}>
  {'Hello ' + this.state.text}
</h1>
...

1,history.go(0)
2,location.reload()
3,location=location
4,location.assign(location)
5,document.execCommand(‘Refresh’)
6,window.navigate(location)
7,location.replace(location)
8,document.URL=location.href

要解析这个东西还需要添加.babelrc文件,在其中添加:

自动刷新页面的方法:
1,页面自动刷新:把如下代码加入<head>区域中

{
  "plugins": ["transform-react-jsx"]
}

复制代码 代码如下:

这句主要是说在babel参与打包时,会启用jsx转换成js的插件。到这里你已经可以成功打出你想要的bundle.js

<meta http-equiv=”refresh” content=”20″>

> webpack

Hash: e716d360a6a752006c09
Version: webpack 4.16.5
Time: 973ms
Built at: 2018-08-14 15:19:14
  Asset   Size Chunks       Chunk Names
bundle.js 715 KiB  main [emitted] main
Entrypoint main = bundle.js
[./react/app.js] 2.74 KiB {main} [built]
  + 21 hidden modules

其中20指每隔20秒刷新一次页面.
2,页面自动跳转:把如下代码加入<head>区域中

webpack打包的好处就是这里,可以让你的app加载速度更快,如上的包总计715kb,隐藏了没有用到的模块21个。这就是为什么要搭手脚架开发的理由。

复制代码 代码如下:

jsx-transform的坑

<meta http-equiv=”refresh” content=”20;url=//www.jb51.net”>

此外还有一点要说一下,就是在引入React时,请整个引入,要么就额外引入它在编译后的代码中可能会用到的api,否则会说什么什么没找到而导致页面加载不出来。看编译后的代码:

其中20指隔20秒后跳转到//www.jb51.net页面
3,页面自动刷新js版

var _react = __webpack_require__(/*! react */ "./node_modules/react/index.js");
var _react2 = _interopRequireDefault(_react);
...
_createClass(MyTitle, [{
key: "handleClick",
value: function handleClick() {
  this.setState({
  text: "Clicked"
  });
}
}, {
key: "render",
value: function render() {
  return _react2.default.createElement(
  "h1",
  { onClick: this.handleClick.bind(this), style: { color: "red" } },
  'Hello ' + this.state.text
  );
}
}]);

复制代码 代码如下:

如果你不引入react,
编译后render()函数中的_react2会是React.createElement而React显然是找不到这个变量的。看到编译后的代码,你可能更能理解,哦在jsx的dom中那样写原来是这个意思啊···

<script language=”JavaScript”>
function myrefresh()
{
   window.location.reload();
}
setTimeout(‘myrefresh()’,1000); //指定1秒刷新一次
</script>

Vscode中开发,需要配置好eslint

4,JS刷新框架的脚本语句

发表评论

电子邮件地址不会被公开。 必填项已用*标注

标签:
网站地图xml地图