Object-oriented use of js, new way of passing parameters, passing of time format
Introducing a front-end framework is nothing more than using its style and js
1. js is evolved from Java, so the internal js classes are used like classes in Java, and the classes in js are instantiated like in Java, and connected with var. Same as other usage
2. The data parameter in ajax can be in json format or url suffix format. Ajax will automatically convert (get/post) according to the transmission type.
3. The time format (string) passed by jsp to the background. If the pojo is date in the background, the format in the @DateTimeFormat pattern must be the same as the one passed by the jsp before it can be received, that is to say, the jsp should also be passed in the same format as the pattern. string date
( Otherwise you get an error requesting an invalid path )
java song:
@XmlTransient
@NotNull
@DateTimeFormat(pattern = "yyyyMMdd")
private Date tranDate;
js:
class RTable extends React.Component {
constructor(props) {
super(props);
//Initial data
this.products = products;
this.state = {
dates:[],
totalSize: 0,
sizePerPage: 5,
page: 1
}
//Data row selection configuration
this.selectRowProp = {
mode: 'radio',
onSelect: this.onRowSelect,
onSelectAll: this.onSelectAll
}
this.ajaxRequestData = this.ajaxRequestData.bind(this);
this.handlePageChange = this.handlePageChange.bind(this);
this.handleSizePerPageChange = this.handleSizePerPageChange.bind(this);
}
componentDidMount(){
//Request page 1 data, and display 5 items per page
alert(12);
this.ajaxRequestData();
}
｝
//DOM loading is complete
componentDidMount(){
//Request page 1 data, and display 5 items per page
alert(12);
this.ajaxRequestData();
}
/*******************************************************************/
ajaxRequestData(page = this.state.page, sizePerPage = this.state.sizePerPage) {
alert("Request "+ page + "page data, each page displays" + sizePerPage);
const currentIndex = (page - 1) * sizePerPage;
this.setState({
datas: products.slice(currentIndex, currentIndex + sizePerPage),
totalSize: products.length,
page:page,
sizePerPage:sizePerPage
})
//ajax load data
$.ajax({
url:this.props.url,
data:this.props.data,
type:'post',
success:function(str,msg,response){
if(response.statusText=="success"){
var result = JSON.parse(response.responseText);
this.setState({
datas:products
});
}
}.bind(this),
error:function(str,msg,response){
}.bind(this)
});
}
externalModalOnSave= (object) =>{
alert("Add"+object)
alert(11);
var dt= new Date().getTime();
var rt=new RTable();///////////////////////////////js instantiate js like in Java Classes in , connect with var
var props={url:"",data:""};
props.url="http://localhost:8080/queryPayInstructionStatus";
///////////////////////The data parameter in ajax can be in json format or url suffix format,
props.data=object+"&tranFunc=1021&counterId=69530&qydm=9012&servType=01&tranDate="+formatDate(new Date())+"&thirdLogNo="+new Date().getTime();//"&tranFunc=1021&tranDate="+formatDate(new Date());//+"&thirdLogNo="+new Date().getTime();//"&tranFunc=1021&counterId=69530&qydm=9012&servType=01&tranDate="+formatDate(new Date())+"&thirdLogNo="+new Date().getTime();//"supAcctId=1&paySerialNo=6";
rt.constructor(props);
rt.componentDidMount();
}
//20170327 format
var formatDate = function (date) {
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m < 10 ? '0' + m : m;
var d = date.getDate();
d = d < 10 ? ('0' + d) : d;
return y + m + d;
};