JEASYUI-REACT 项目应用。

目录

jeasyUI-REACT项目应用。

使用PYTHON+REACT+jeasyUI-REACT制作一个小项目。项目主要用于课程报名、课程打卡、课程相关的提醒。与公众号相关联，可以发送自定义消息。

写写jeasyUI-REACT的使用心得。jeasyUI-REACT，以下简写JUR 参考网址:https://www.jeasyui.com/documentation5/index.php

jur感觉还可以，写一些轻便的项目完全够用。也有比较坑的地方，下面一一说明下。

来一张最复杂的页面构成。[图一]

此图包含了JUR里绝大多数的控件。

1.Layout 构成了页面的整体部局。上 下 左 右

render() {
        return (
            <div>
                <Layout>
                    {/*上--顶部*/}
                    <LayoutPanel region="north" style={{height: 136}}>
                        <Header/>
                    </LayoutPanel>
                    {/*下--底部*/}
                    <LayoutPanel region="south" style={{height: 50}}>
                        <Weather/>
                    </LayoutPanel>
                    {/*左--菜单*/}
                    <LayoutPanel region="west" split className="menuLeft" title={<span style={{color:'#666'}}>隐藏</span>} iconCls="icon-tags_grey" collapsible  expander>
                        <Menus/>
                    </LayoutPanel>
                    {/*右*/}
                    <LayoutPanel region="center" style={{height: '850px', padding: '5px 0px 5px 5px'}}>
                        <div>
                            操作区域
                        </div>
                    </LayoutPanel>
                </Layout>
            </div>
        );
    }

 2.DataGrid 数据表格。这个有几个点 挺坑的 也许是我没做对。

a.常见的就是表格中再嵌套表格的方法。不要看官方给的例子。发现无论是JUR还是其他任何一种REACT的第三方插件库 给出类似的数据表格都一这样的问题，即：事例中给出的数据源全是定义好的数据，实际 使用中都是要使用AJAX技术从数据接口中取出在再行渲染。图1的嵌套表格研究了好几天才算把坑填平。

a.代码段。
<div style={{padding: '5px 5px 5px 5px'}}>
    <DataGrid 
        ref={ref => this.dataGrid = ref} 
        data={this.state.data} 
        defaultLoadMsg={'数据加载中，请稍后...'} 
        loading={this.state.loading} border="0" 
        renderDetail={this.renderDetail} 
        onRowExpand={(row) => {row.expander_row = true; this.renderGrid(row);}}             
        onRowCollapse={(row) => {row.expander_row = false; row.students = []}} 
        toolbar={() => (<div style={{padding: 4}}>
                        <LinkButton style={{marginRight: '10px'}} className='c2' iconCls="icon-book_open_mark" plain onClick={this.handDeleted.bind(this, 0)}>未删课程</LinkButton>
                        <LinkButton style={{marginRight: '10px'}} className='c2' iconCls="icon-book_open_mark" plain onClick={this.handDeleted.bind(this, 1)}>已删课程</LinkButton>
                        <LinkButton className='c2' iconCls="icon-book_open_mark" plain onClick={this.handDeleted.bind(this, -1)}>所有课程</LinkButton>
                        </div>
                            )}>
                                <GridColumn expander width="30px"></GridColumn>
                                <GridColumn field="id" title="序号" width="60px" align="center" render={({rowIndex}) => (
                                    this.operation_id(rowIndex)
                                )}/>

                                <GridColumn align="center" field="wechat_num" width="110px" title="课程编号"></GridColumn>
                                <GridColumn field="name" width="280px" title="课程名称"></GridColumn>
                                <GridColumn align="center" field="type" width="60px" title="课程类型"></GridColumn>
                                <GridColumn align="center" field="teacher" width="65px" title="教师"></GridColumn>
                                <GridColumn align="center" field="btime" width="80px" title="开课日期"></GridColumn>
                                <GridColumn align="center" field="etime" width="80px" title="结课日期"></GridColumn>
                                <GridColumn align="center" field="start" width="120px" title="课程状态" render={({row}) => (this.start_status(row))}/>
                                <GridColumn align="center" field="period" width="55px" title="课时"></GridColumn>
                                <GridColumn align="center" field="price" width="55px" title="价格"></GridColumn>

                                <GridColumn field="menu_list" title="操作" align="center" width="250px" render={({row}) => (this.operation(row))}
                                />
                                <GridColumn align="left" field="synopsis" title="简介"></GridColumn>
                            </DataGrid>
</div>

renderDetail：数据表格拓展--学员信息 点击第一层表格第一列加号的时候 展开的数据表格。这个方法的返回就是返回另一个 return DataGrid

onRowExpand：这个方法最重要。点击加号后要获取数据来源的方法，只能通过个方法去获取具体的子表格数据源。也许有人会问，子表格的数据为什么不在第一层表格获取数据源的时候一起获取下，这不是什么难事。我的回答是因为这么做了 数据不够准确，一旦有人再报名时 这时候数据就不对了。最起码最新的数据你是获取不到的。

    /*
    * 拓展内容 onRowExpand方法
    * */
    renderGrid(row) {
        let that = this;
        let params = new URLSearchParams();
        params.set('course_id', row.id);
        axios({
            method: 'POST',
            url: '/sys/api/course_applies',
            responseType: 'json',
            data: params,
        }).then(resp => {
            const result = resp.data;
            if (result.status === 0) {
                row.students = result.applies;
                let _applies = that.state.applies;
                if (_applies.find((s) => s.course_id === row.id) === undefined) {
                    let arr = {
                        'course_id': row.id,
                        'applies': result.applies
                    };
                    _applies.push(arr);
                    that.setState({
                        applies: _applies
                    });
                } else {
                    let arr = {
                        'course_id': row.id,
                        'applies': result.applies
                    };
                    _applies.splice(_applies.indexOf(_applies.find((s) => s.course_id === row.id)), 1, arr);
                    that.setState({
                        applies: _applies
                    });
                }
            } else {
                Message({
                    message: result.msg,
                    type: 'warning'
                });
            }
        }).catch(error => {
            console.log(error);
        });
    }

onRowCollapse: 关闭某一行的嵌套表格。

看到子表格中的多选checkbox了吗？这个地方我是没太理解出来到底为什么不能实现。你们看到的效果是我用最原始的方法实现的。如果按照官方给出的方法去做，永远也不能马上渲染出来。也可能是我技术不到家吧。这地方太折腾人了，我就用了个比较偷懒的方法。

checkbox all
    /*
    * 全部选择、取消全选
    * 这个问题完全没有按REACT的思想实现 我是按JQUERY的方法实现的。查找对应ID的checkbox，判断是否是选中状态 如果选中了 那么做出对应的样式的改变。注意这个不能自定义什么样式 ，因为总体框架下还在使用JUR的样式，只能按照已经给出的样式做出相应的调整。
    * */
    handleAllCheck(checked, column, r) {
        let data = r.students.slice();
        r.students.map(row => {
            let index = r.students.indexOf(row);
            data.splice(index, 1, Object.assign({}, row, {_selected: checked}));
        });
        r.students = data;
        let sapns = document.getElementById('render_' + r.id).getElementsByTagName('span');
        if (checked) {
            for (let i = 0; i < sapns.length; i++) {
                if (sapns[i].className === 'f-full') {
                    sapns[i].className = 'f-full checkbox-checked';
                    sapns[i].innerHTML = '<svg class="checkbox-inner" space="preserve" focusable="false" version="1.1" viewBox="0 0 24 24"><path d="M4.1,12.7 9,17.6 20.3,6.3" fill="none" stroke="white"></path></svg>';
                }
            }
        } else {
            for (let i = 0; i < sapns.length; i++) {
                if (sapns[i].className === 'f-full checkbox-checked') {
                    sapns[i].className = 'f-full';
                    sapns[i].innerHTML = '';
                }
            }
        }
    }

项目历时一个月 一个人完成。遇到最大的坑就是上边这两。其他还好说。就写这吧。