zoukankan      html  css  js  c++  java
  • easyUi可编辑表格

    //表格展示
    
    $("#tt").datagrid({
        columns:[[
            {field:'itemid',title:'Item ID',80,sortable:true,editor:'text'},
            {field:'productid',title:'Product ID',80,sortable:true,editor:'text'},
            {field:'status',title:'Item Details',editor:'text'},
            {field:'listprice',title:'List Price',80,align:'right',sortable:true,
            editor:'text'
                },
            {field:'unitcost',title:'Unit Cost',80,align:'right',sortable:true,
            styler: function(value,row,index){
                    if (value < 12 || value > 12){
                        return 'color:red;';
                        // the function can return predefined css class and inline style
                        // return {class:'c1',style:'color:red'}
                    }
                }
            },
            {field:'attr1',title:'Attribute',100,formatter: function(value,row,index){
                  if (row.user){
                        return row.user.name;
                    } else {
                        return value;
                    }
                }},
        ]]
    });
        var editIndex = undefined; //全局变量
        var editField = undefined; //全局变量
    //数据网格编辑 $('#tt').datagrid({ onClickCell: function (index, field, value) { //每个文本框都可以编辑 if(endEditing()){ myonClickCell(index, field); } }, }); //自定义编辑 function myonClickCell(index,field){ editIndex = index; editField = field; $('#tt').datagrid('editCell', { index: index, field: field }); }
    
    //结束编辑
        function endEditing(){
        if (editIndex == undefined) { return true; }
                 if ($('#tt').datagrid('validateRow', 100)) {
                 console.log(111);
                    $('#tt').datagrid('endEdit', editIndex);
                     editIndex = undefined;
                     editField = undefined;
                     return true;
                } else {
                return false;
            }
        }
    //下面是单元格编辑方法
        $.extend($.fn.datagrid.methods, {
            editCell: function (jq, param) {
                // console.log(param){index: 3, field: "tb_zkje"};
                    return jq.each(function () {
                        var opts = $(this).datagrid('options');
                        var fields = $(this).datagrid('getColumnFields', true).concat($(this).datagrid('getColumnFields'));
                        for (var i = 0; i < fields.length; i++) {
                            var col = $(this).datagrid('getColumnOption', fields[i]);
                            col.editor1 = col.editor;
                            if (fields[i] != param.field) {
                                col.editor = null;
                            }
                        }
                        $(this).datagrid('beginEdit', param.index);
                        for (var i = 0; i < fields.length; i++) {
                            var col = $(this).datagrid('getColumnOption', fields[i]);
                            col.editor = col.editor1;
                        }
                    });
                }
         });
  • 相关阅读:
    一些你可能用到的代码
    iOS 键盘下去的方法
    iOS设计模式汇总
    随笔
    Spring cloud config 分布式配置中心 (三) 总结
    Spring cloud config 分布式配置中心(二) 客户端
    Spring cloud config 分布式配置中心(一) 服务端
    jdbcUrl is required with driverClassName spring boot 2.0版本
    JpaRepository接口找不到 spring boot 项目
    解决IntelliJ “Initialization failed for 'https://start.spring.io'
  • 原文地址:https://www.cnblogs.com/zoumin123/p/6347340.html
Copyright © 2011-2022 走看看