DataGrid 扩展

    //扩展表格,支持上传附件
    function extendDataGrid(){
        //扩展表格方法,合并单元格 ,参数为数组
           $.extend($.fn.datagrid.methods, {
            autoMergeCells : function (jq, fields) {
               return jq.each(function () {
                   var target = $(this);
                   if (!fields) {
                       fields = target.datagrid("getColumnFields", true).concat(target.datagrid("getColumnFields"));
                   }
                   var rows = target.datagrid("getRows");
                   var i = 0,
                   j = 0,
                   temp = {};
                   for (i; i < rows.length; i++) {
                       var row = rows[i];
                       j = 0;
                       for (j; j < fields.length; j++) {
                           var field = fields[j];
                           var tf = temp[field];
                           if (!tf) {
                               tf = temp[field] = {};
                               tf[row[field]] = [i];
                           } else {
                               var tfv = tf[row[field]];
                               if (tfv) {
                                   tfv.push(i);
                               } else {
                                   tfv = tf[row[field]] = [i];
                               }
                           }
                       }
                   }
                   $.each(temp, function (field, colunm) {
                       $.each(colunm, function () {
                           var group = this;
                           if (group.length > 1) {
                               var before,after, megerIndex = group[0];
                               for (var i = 0; i < group.length; i++) {
                                   before = group[i];
                                   after = group[i + 1];
                                   if (after && (after - before) == 1) {
                                       continue;
                                   }
                                   var rowspan = before - megerIndex + 1;
                                   if (rowspan > 1) {
                                       target.datagrid(‘mergeCells‘, {
                                           index : megerIndex,
                                           field : field,
                                           rowspan : rowspan
                                       });
                                   }
                                   if (after && (after - before) != 1) {
                                       megerIndex = after;
                                   }
                               }
                           }
                       });
                   });
               });
               }
           });

           //表格编辑列为文件上传框
           $.extend($.fn.datagrid.defaults.editors, {
            filebox: {
                init: function(container, options){   

                    var index=container.closest(".datagrid-row").attr("datagrid-row-index");
                       var formname="form_"+index;
                       var formhtml=$("<form id=‘"+formname+"‘ name=‘"+formname+"‘ method=‘post‘ action=‘${ctx}/khyj/ks/savedata_form‘ ENCTYPE=‘multipart/form-data‘>  </form>").appendTo(container);  //<input type=‘submit‘  value=‘提交‘>
                       var inputhidden=$("<input id=‘data_hidden‘ type=‘hidden‘  value=‘‘ />").appendTo(formhtml);
                    var input = $(‘<input class="easyui-filebox" style="width:90%;height:30px" data-options="prompt:\‘选择一个文件...\‘,buttonText:\‘选择文件\‘" > ‘).appendTo(formhtml);    //datagrid-editable-input
                    $.parser.parse(container.parent());  //解析
                    return input;    

                },
                getValue: function(target){
                    setinputfile(target); //将 文件选择控件保存
                    var text=$(target).filebox(‘getText‘);
                    if(text=="")
                        text=null;
                    return text;
                },
                setValue: function(target, value){
                     $(target).filebox(‘setText‘,value);
                },
                resize: function(target, width){
                    var width=$(target).closest("td").width();
                    width=width*0.9;
                     $(target).filebox(‘resize‘,width);
                }
            }
        });

           //覆盖默认方法
           $.fn.datagrid.defaults.editors.textarea.getValue= function(target){
            var value=$(target).val();
            if(value.trim()=="")
                value=null;
            return value;
        }
   }
时间: 2024-10-13 00:24:50

DataGrid 扩展的相关文章

JqueryEasyUI之DataGrid扩展

DataGrid通用合并扩展方法: $.extend($.fn.datagrid.methods, { autoMergeCells: function (jq, fields) { return jq.each(function () { var target = $(this); if (!fields) { fields = target.datagrid("getColumnFields"); } var rows = target.datagrid("getRows

jquery-easyui中datagrid扩展,隐藏显示表头功能

今天,后台中需要新增一个功能,用户可以自由选择显示的列,之后保存到本地localStroage中.所以扩展了easyui中datagrid的onHeaderContextMenu方法. 使用方法: _this.$table.datagrid(_.extend({ fit: true, border: false, striped: true, method: "get", pagination: true, singleSelect: true, loadMsg: "加载数据

easyui Datagrid方法扩展 - tooltip

最新版本的jQuery Easyui新出来了一个组件叫tooltip,就是提示框.以前的版本没有这个组件的时候就有很多在问,datagrid的单元格,我要加鼠标提示要怎么做.原来我告诉他们的方法都是用formatter,大概方法如下: formatter:function(value){ return '<span title="'+value+'">'+value+'<span>'; } 这样的方式就利用了浏览器自己的title特性,来达到显示效果.只是这种实

Datagrid方法扩展 - tooltip

最新版本的jQuery Easyui新出来了一个组件叫tooltip,就是提示框.以前的版本没有这个组件的时候就有很多在问,datagrid的单元格,我要加鼠标提示要怎么做.原来我告诉他们的方法都是用formatter,大概方法如下: formatter:function(value){ return '<span title="'+value+'">'+value+'<span>';} 这样的方式就利用了浏览器自己的title特性,来达到显示效果.只是这种实现

扩展easyui.datagrid,添加数据loading遮罩效果代码 --来自网摘收集

//jquery.datagrid 扩展 (function (){ $.extend($.fn.datagrid.methods, { //显示遮罩 loading: function(jq){ return jq.each(function(){ $(this).datagrid("getPager").pagination("loading"); var opts = $(this).datagrid("options"); var wra

EasyUI中对datagrid的扩展方法

以下是给datagrid扩展一个方法的demo 1.给datagrid添加一个属性 $.extend($.fn.datagrid.defaults, { demo: "demo1" }); 2.给datagrid添加一个方法 $.extend($.fn.datagrid.methods, { test1: function (jq, param) { alert(“ok”); } }); 3.调用方法 $('#dg').datagrid('options').demo;//这里取新加的

Easyui扩展(方法和属性)

1:DataGrid扩展单元格合并方法: /** * author ____′夏悸 * create date 2012-11-5 **/ $.extend($.fn.datagrid.methods, { autoMergeCells: function (jq, fields) { return jq.each(function () { var target = $(this); if (!fields) { fields = target.datagrid("getColumnField

写一个基于jQuery.easyui 的可编辑表格插件

最近项目前端使用 jquery+easyui来做,用了几个月,觉得easyui是一个很不错的开源前端UI框架, 虽然偶尔会遇到一些小问题,但是凭借多年前端开发的实力积累 都一一解决了,其中比较典型的就是 这个 easyui.editgrid插件了,是基于easyui.datagrid扩展的.其实只用easyui.datarid也能实现 类似的功能,但是速度很慢,用户体验极差,所以抛弃了原来easyui.datagrid  中编辑功能的架构 自己扩展实现了其可编辑部分,就是现在的easyui.ed

SpringMVC +mybatis+spring 结合easyui用法及常见问题总结

1.FormatString的用法. 2.用postAjaxFillGrid实现dataGrid 把form表单转换成一个map对象传入后台实现条件查询. Js代码: var oPage = {     pageIndex: 1,     pageSize: 20 };    postAjaxFillGrid('#FormID','${contextPath}/discountController/selectDiscount','#DataGridId', oPage);   参数说明: fo