双向选择表格(支持IE8及以上)

所属分类:输入-选择框

 5758  57  查看评论 (0)
分享到微信朋友圈
X
双向选择表格(支持IE8及以上) ie兼容8
$("#selector").shuttle({
    left: {
        title: "左边表格title",
        url: urlLeft, // 左边表格加载url
        search: { // 定义左边查询条件,支持下拉框
            columns: [
                {
                    title: '产品名称',
                    name: 'productName'
                },
                {
                    title: '产品编码',
                    name: 'productCode'
                },
                {
                    title: '产品类型',
                    name: 'productType',
                    input: {
                        type: 'select',
                        url: selectInitURL,
                        selectText: 'DETAIL',
                        selectValue: 'CODE'
                    }
                }, // 下拉框条件
                {
                    title: '产品大类',
                    name: 'productLargeClassName'
                }
            ]
        },
        table: { // 定义左边表格,支持链接
            keyIdName: leftKeyIdName, // 定义行主键,用于选择时指定的自动操作,当然也可以自己加事件去操作,会返回全部数据
            columns: [
                {
                    title: '产品名称',
                    name: 'productName',
                    style: 'width:130px;'
                },
                {
                    title: '产品编码',
                    name: 'productCode',
                    style: 'width:70px;'
                },
                {
                    title: '产品类型',
                    name: 'productTypeName',
                    style: 'width:70px;'
                },
                {
                    title: '产品大类',
                    name: 'productLargeClassName',
                    style: 'width:70px;'
                },
                {
                    title: '操作类型',
                    name: 'operateFlag',
                    style: 'width:55px;'
                },
                {
                    title: '操作',
                    value: '查看',
                    className: 'link',
                    style: 'width:25px;',
                    tips: '点击查看产品详情',
                    onclick: function(row) {
                        showProdDetail(row);
                    }
                }
            ],
            pagger: {
                enable: true
            }
        }
    },
    right: {
        title: rightTitle,
        url: urlRight,
        search: '#left.search', // 指定右侧与左侧一致,也可以自己定义,同上
        table: {
            keyIdName: rightKeyIdName,
            columns: '#left.table.columns', // 指定右侧与左侧一致,也可以自己定义,同上
            hiddenColumn: [] //'productCode'   // 定义要隐藏的列
        }
    },
    save: {
        enable: true, // 为true时打开自动保存,指定从左到右或从右到左操作后保存的url
        leftToRightURL: leftToRightURL,
        rightToLeftURL: rightToLeftURL
    },
    event: { // 事件,除before外还有after事件。 比如这里的before事件可以动态转换一些自己要的数据后再放到另一侧
        beforeLeftToRight: function(selecedRows) {
            beforeLeftToRight(selecedRows, operationType);
        },
        beforeRightToLeft: function(selecedRows) {
            beforeRightToLeft(selecedRows, operationType);
        }
    }
});
相关插件-选择框

jQuery省市联动、下拉框表单美化

jQuery个人信息表单,联动、下拉框表单美化
  选择框
 29356  264

jQuery移动端城市联动选择插件

修改jquery.area.js(by锐不可挡),添加热门城市功能
  选择框
 21062  192

jQuery仿美团APP筛选

jQuery条件筛选
  选择框
 32877  258

单选框和复选款

漂亮的单选框和复选框,调用简单,只需要引入js即可使用
  选择框
 16778  193

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

取消回复