bui弹出框加表格

bui弹出框加表格

添加时间:2021-03-03 13:16:21
站长推荐丨赞助论坛,可获取海量资源终身免费下载权限奥!
举报 举报
收藏
预览
附件 附件
  • 模板类型模板类型:弹窗
  • 模板颜色模板颜色:初级
  • 下载积分下载积分:28 米粒
  • 下载权限下载权限:

    赞助会员

测试bui弹出框加表格 适配任何浏览器包括移动端,bui增删改查表格特效代码
bui弹出框加表格
分类:悬浮层/弹出层 > 弹窗 难易:初级
BUI.use(['bui/overlay', 'bui/form', 'bui/grid', 'bui/data'], function(Overlay, Form, Grid, Data) {

    var form = new Form.HForm({
        srcNode: '#form'
    }).render();

    var dialog = new Overlay.Dialog({
        title: '配置DOM',
        width: 500,
        height: 620,
        //配置DOM容器的编号
        contentId: 'content',
        success: function() {
            alert('确认');
            this.close();
        }
    });
    dialog.show();
    $('#btnShow').on('click', function() {
        dialog.show();
    });


    Store = Data.Store,
            enumObj = {"1": "选项一", "2": "选项二", "3": "选项三"},
    columns = [
        {title: '文本', dataIndex: 'a', editor: {xtype: 'text', validator: validFn}}, //editor中的定义等用于 BUI.Form.Field.Text的定义
        {title: '数字', dataIndex: 'b', editor: {xtype: 'number', rules: {required: true}}},
        {title: '日期', dataIndex: 'c', editor: {xtype: 'date'}, renderer: Grid.Format.dateRenderer}

    ],
            data = [{a: '123', e: '2,3', f: false}, {a: 'cdd', c: 1363924044176, f: true}, {a: '1333', b: 2222, d: 2, f: false}];
    function valid(value) {

        if (value === '1') {
            return '不能选择1';
        }
    }
    var editing = new Grid.Plugins.CellEditing({
        triggerSelected: false //触发编辑的时候不选中行
    }),
            store = new Store({
                data: data,
                autoLoad: true
            }),
            grid = new Grid.Grid({
                render: '#grid',
                columns: columns,
                width: 400,
                height: 220,
                forceFit: true,
                tbar: {//添加、删除
                    items: [{
                            btnCls: 'button button-small',
                            text: '<i class="icon-plus"></i>添加',
                            listeners: {
                                'click': addFunction
                            }
                        },
                        {
                            btnCls: 'button button-small',
                            text: '<i class="icon-remove"></i>删除',
                            listeners: {
                                'click': delFunction
                            }
                        }]
                },
                plugins: [editing, Grid.Plugins.CheckSelection, Grid.Plugins.ColumnChecked],
                store: store
            });
    grid.render();

    function validFn(value, obj) {
        //debugger;
        var records = store.getResult(),
                rst = '';
        BUI.each(records, function(record) {
            if (record.a == value && obj != record) {
                rst = '文本不能重复';
                return false;
            }
        });
        return rst;
    }

    //添加记录
    function addFunction() {
        var newData = {b: 0};
        store.addAt(newData, 0);
        editing.edit(newData, 'a'); //添加记录后,直接编辑
    }
    //删除选中的记录
    function delFunction() {
        var selections = grid.getSelection();
        store.remove(selections);
    }
});
相关内容推荐
资源求助发帖
查看更多发帖

*

回帖描述:

*

链接类型:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
热点内容推荐
标题:bui弹出框加表格

*

描述:
平均回复时间:3-10分钟
规则介绍:悬赏寻求论坛网友分享资源,站点对分享内容的准确性,合法性,版权等没有足够的监管能力。如果您发现资源不正确,无法使用,不符合法律法律等情况,您可以直接举报资源。站长将尽快核实您的举报,并根据情况,采取封号,退换米粒等处理。

*

回帖描述:

*

链接类型:

*

阅读权限:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
  • 背景波浪
  • 背景波浪
  • 波浪
  • 波浪
客服
在线咨询
周一 至 周日 9:00 ~ 22:00
QQ:1326974360
微信:juyoubuluo6688
客服热线
18205485173
工作日 9:00 ~ 18:00
微信扫码咨询
客户服务
欢迎咨询服务
咨询量较多时,请耐心等待
社群

关注公众号

获取更多资讯

扫码进群(QQ)

与更多大牛交流沟通

0.170537s