grid

grid

  BlogJava :: 首页 :: 联系 :: 聚合  :: 管理
  78 Posts :: 0 Stories :: 62 Comments :: 0 Trackbacks

#

表格:分组
                
            
                      

参考示例分组

                   
           

调用分组方法:groupBy。如下代码:

grid.groupBy("gender", "asc");

       

       

           
       

   
posted @ 2012-11-22 16:54 nikofan 阅读(1890) | 评论 (0)编辑 收藏

表格:右键菜单
                
                     

参考示例右键菜单


            
          

一:创建ContextMenu

<ul id="gridMenu" class="mini-contextmenu" onbeforeopen="onBeforeOpen">              
    <li name="add" iconCls="icon-add" onclick="onAdd">新增</li>
    <li name="edit" iconCls="icon-edit" onclick="onEdit">编辑节点</li>
    <li name="remove" iconCls="icon-remove" onclick="onRemove">删除节点</li>        
</ul>

           

二:设置表格contextmenu

<div id="datagrid1" class="mini-datagrid" 
    contextMenu="#gridMenu">
    ......
</div>   

           

三:监听beforeopen事件          

监听右键菜单的beforeopen事件,可以对右键菜单精确控制。

function onBeforeOpen(e) {
    var grid = mini.get("datagrid1");
    var menu = e.sender;
            
    var row = grid.getSelected();
    var rowIndex = grid.indexOf(row);            
    if (!row ||  rowIndex== 0) {
        e.cancel = true;
        //阻止浏览器默认右键菜单
        e.htmlEvent.preventDefault();
        return;
    }
    ////////////////////////////////
    var editItem = mini.getbyName("edit", menu);
    var removeItem = mini.getbyName("remove", menu);
    editItem.show();
    removeItem.enable();

    if (rowIndex == 1) {
        editItem.hide();
    }
    if (rowIndex == 1) {
        removeItem.disable();
    }

}

           

四:表头菜单headerContextMenu


 创建同样一个menu菜单对象,设置给表格的headerContextMenu属性即可。
posted @ 2012-11-21 17:20 nikofan 阅读(2266) | 评论 (0)编辑 收藏

单元格编辑验证
            
            
           

参考示例单元格编辑验证


                     

一:设置编辑器验证规则

<div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号
    <input property="editor" class="mini-textbox" style="width:100%;" required="true" vtype="email"  />
</div>       
使用编辑器的vtype和onvalidation事件,可以实现编辑器验证规则。详细可以查看:数据验证
           

二:监听处理cellcommitedit事件

//提交单元格编辑数据前激发
function onCellCommitEdit(e) {
    var editor = e.editor;
    editor.validate();
    if (editor.isValid() == false) {
        alert(editor.getErrorText());
        e.cancel = true;
    }
}
grid.on("cellcommitedit", onCellCommitEdit);

Grid的cellcommitedit事件,在编辑值提交前激发。此时,可以调用编辑器的验证方法validate,判断输入的内容是否符合验证规则。
posted @ 2012-11-20 15:38 nikofan 阅读(3204) | 评论 (1)编辑 收藏

CRUD之:弹出面板编辑
            
                      

参考示例CRUD之:弹出面板编辑


                      

一:创建弹出编辑面板

<div id="editWindow" class="mini-window" title="Window" style="width:650px;" 
    showModal="true" allowResize="true" allowDrag="true"
    >
    <div id="editform" class="form" >
        <input class="mini-hidden" name="id"/>
        <table style="width:100%;">
            <tr>
                <td style="width:80px;">员工帐号:</td>
                <td style="width:150px;"><input name="loginname" class="mini-textbox" /></td>
                <td style="width:80px;">姓名:</td>
                <td style="width:150px;"><input name="name" class="mini-textbox" /></td>
                <td style="width:80px;">薪资:</td>
                <td style="width:150px;"><input name="salary" class="mini-textbox" /></td>
            </tr>
            <tr>
                <td>性别:</td>
                <td><input name="gender" class="mini-combobox" url="mini_JSPath + '../../demo/data/genders.txt'"/></td>
                <td>年龄:</td>
                <td><input name="age" class="mini-spinner" minValue="0" maxValue="200" value="25"  /></td>
                <td>出生日期:</td>
                <td><input name="birthday" class="mini-datepicker" /></td>
            </tr>
            <tr>
                <td style="text-align:right;padding-top:5px;padding-right:20px;" colspan="6">
                    <a class="Update_Button" href="javascript:updateRow()">Update</a> 
                    <a class="Cancel_Button" href="javascript:cancelRow()">Cancel</a>
                </td>                
            </tr>
       
        </table>
    </div>
</div>
           

二:面板操作          

弹出加载面板数据:

var editWindow = mini.get("editWindow");
editWindow.show();
var form = new mini.Form("#editform");
form.loading();
$.ajax({
    url: "../data/DataService.aspx?method=GetEmployee&id=" + row.id,
    success: function (text) {
        var o = mini.decode(text);
        form.setData(o);
        form.unmask();
    },
    error: function () {
        alert("表单加载错误");
    }
});
保存提交面板数据:
var form = new mini.Form("#editform");
var o = form.getData();

grid.loading("保存中,请稍后......");
var json = mini.encode([o]);
$.ajax({
    url: "../data/DataService.aspx?method=SaveEmployees",
    data: { employees: json },
    success: function (text) {
                    
        grid.reload();
    },
    error: function (jqXHR, textStatus, errorThrown) {
        alert(jqXHR.responseText);
    }
});

editWindow.hide();
    
posted @ 2012-11-19 22:33 nikofan 阅读(1924) | 评论 (0)编辑 收藏

CRUD之:行内表单编辑
            
                                 

参考示例CRUD之:行内表单编辑


                      

一:创建编辑表单

<div id="editForm1" style="display:none;padding:5px;position:relative;">
    <input class="mini-hidden" name="id"/>
    <table style="width:100%;">
        <tr>
            <td style="width:80px;">员工帐号:</td>
            <td style="width:150px;"><input name="loginname" class="mini-textbox" /></td>
            <td style="width:80px;">姓名:</td>
            <td style="width:150px;"><input name="name" class="mini-textbox" /></td>
            <td style="width:80px;">薪资:</td>
            <td style="width:150px;"><input name="salary" class="mini-textbox" /></td>
        </tr>
        <tr>
            <td>性别:</td>
            <td><input name="gender" class="mini-combobox" data="Genders"/></td>
            <td>年龄:</td>
            <td><input name="age" class="mini-spinner" minValue="0" maxValue="200" value="25"  /></td>
            <td>出生日期:</td>
            <td><input name="birthday" class="mini-datepicker" /></td>
        </tr>
        <tr>
            <td style="text-align:right;padding-top:5px;padding-right:20px;" colspan="6">
                <a class="Update_Button" href="javascript:updateRow();">Update</a> 
                <a class="Cancel_Button" href="javascript:cancelRow();">Cancel</a>
            </td>                
        </tr>
    </table>
</div>
                     

二:嵌入详细行          

//显示行详细
grid.hideAllRowDetail();
grid.showRowDetail(row);
//将editForm元素,加入行详细单元格内
var td = grid.getRowDetailCellEl(row);
td.appendChild(editForm);
editForm.style.display = "";
          

三:加载表单           

var form = new mini.Form("editForm1");
if (grid.isNewRow(row)) {                    
    form.reset();
} else {
    form.loading();
    $.ajax({
        url: "../data/DataService.aspx?method=GetEmployee&id=" + row.id,
        success: function (text) {
            var o = mini.decode(text);
            form.setData(o);                            

            form.unmask();
        }
    });
}
          

四:提交表单 

var form = new mini.Form("editForm1");
var o = form.getData();           
grid.loading("保存中,请稍后......");
var json = mini.encode([o]);
$.ajax({
    url: "../data/DataService.aspx?method=SaveEmployees",
    data: { employees: json },
    success: function (text) {
        grid.reload();
    },
    error: function (jqXHR, textStatus, errorThrown) {
        alert(jqXHR.responseText);
    }
});
posted @ 2012-11-16 16:03 nikofan 阅读(543) | 评论 (0)编辑 收藏

CRUD之:行编辑
                       

参考示例CRUD之:行编辑

                     

一:创建单元格编辑器

<div id="datagrid1" class="mini-datagrid" style="width:700px;height:280px;" 
    url="../data/DataService.aspx?method=SearchEmployees" 
>
    <div property="columns">
        <div name="action" width="120" headerAlign="center" align="center" renderer="onActionRenderer" cellStyle="padding:0;">#</div>
        <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号
            <input property="editor" class="mini-textbox" />
        </div>                
        <div field="gender" width="100" allowSort="true" renderer="onGenderRenderer" align="center" headerAlign="center">性别
            <input property="editor" class="mini-combobox" style="width:100%;" data="[{id:1,text:'男'}, {id:2, text: '女'}]"/>                
        </div>            
        <div field="age" width="100" allowSort="true">年龄
            <input property="editor" class="mini-spinner" minValue="0" maxValue="200" value="25" style="width:100%;"/>
        </div>
        <div field="birthday" width="100" allowSort="true" dateFormat="yyyy-MM-dd">出生日期
            <input property="editor" class="mini-datepicker" style="width:100%;"/>
        </div>                                    
        <div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div>                
    </div>
</div>            

比如:mini-textbox的property为"editor",表示是此列的编辑器。




           

二:编辑操作

开始编辑行:
grid.beginEditRow(row);
取消编辑:
grid.cancelEdit();

提交编辑数据:

var rowData = grid.getEditRowData(row);
grid.loading("保存中,请稍后......");
var json = mini.encode([rowData]);
$.ajax({
    url: "../data/DataService.aspx?method=SaveEmployees",
    data: { employees: json },
    success: function (text) {
        grid.reload();
    },
    error: function (jqXHR, textStatus, errorThrown) {
        alert(jqXHR.responseText);
    }
});
posted @ 2012-11-14 16:32 nikofan 阅读(4951) | 评论 (2)编辑 收藏

CRUD之:单元格编辑
            
            
          

参考示例单元格编辑


           


           

一:创建单元格编辑器

<div id="datagrid1" class="mini-datagrid" style="width:800px;height:280px;" 
    url="../data/AjaxService.aspx?method=SearchEmployees" idField="id"
    allowResize="true" pageSize="20" 
    allowCellEdit="true" allowCellSelect="true" multiSelect="true">
    <div property="columns">
        <div type="checkcolumn"></div>            
        <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号
            <input property="editor" class="mini-textbox" style="width:100%;"/>
        </div>                
        <div field="gender" width="100" renderer="onGenderRenderer" align="center" headerAlign="center">性别
            <input property="editor" class="mini-combobox" style="width:100%;" data="Genders"/>                
        </div>
        <div field="age" width="100" allowSort="true" >年龄
            <input property="editor" class="mini-spinner" minValue="0" maxValue="200" value="25" style="width:100%;"/>
        </div>
        <div field="birthday" width="100" allowSort="true" dateFormat="yyyy-MM-dd">出生日期
            <input property="editor" class="mini-datepicker" style="width:100%;"/>
        </div>    
        <div field="remarks" width="120" headerAlign="center" allowSort="true">备注
            <input property="editor" class="mini-textarea" style="width:100%;" minHeight="80"/>
        </div>                                 
        <div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div>
    </div>
</div>           

设置allowCellEdit和allowCellSelect后,表格为单元格编辑模式。

         

二:编辑操作          

增加行:

function addRow() {
    var newRow = { name: "New Row" };
    grid.addRow(newRow, 0);
}
删除行:
function removeRow() {
    var rows = grid.getSelecteds();
    if (rows.length > 0) {
        grid.removeRows(rows, true);
    }
}
保存数据:
function saveData() {
    //获得增加、删除、修改的记录集合
    var data = grid.getChanges();
    var json = mini.encode(data);
    grid.loading("保存中,请稍后......");        
    $.ajax({
        url: "../data/AjaxService.aspx?method=SaveChangedEmployees",
        data: { data: json },
        type: "post",
        success: function (text) {
            grid.reload();
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert(jqXHR.responseText);
        }
    });
}
          

三:服务端处理

public void SaveChangedEmployees()
{
    String json = Request["data"];
    ArrayList rows = (ArrayList)PluSoft.Utils.JSON.Decode(json);

    foreach (Hashtable row in rows)
    {
        //根据记录状态,进行不同的增加、删除、修改操作
        String state = row["_state"] != null ? row["_state"].ToString() : "";
        if(state == "added")
        {
            row["createtime"] = DateTime.Now;
            new TestDB().InsertEmployee(row);
        }
        else if (state == "removed" || state == "deleted")
        {
            String id = row["id"].ToString();
            new TestDB().DeleteEmployee(id);
        }
        else if (state == "modified")
        {
            new TestDB().UpdateEmployee(row);
        }
    }
}
           
posted @ 2012-11-13 22:38 nikofan 阅读(2242) | 评论 (0)编辑 收藏

详细行
                
            
                   

参考示例详细行

            
           

表格的"showRowDetail"方法可以为一个普通表格行增加了一个详细行。          

通过"getRowDetailCellEl"方法获得此详细行的DOM元素后,可以在此详细行DOM元素内加入任何HTML内容。

function onShowRowDetail(e) {
    var grid = e.sender;
    var row = e.record;

    var td = grid.getRowDetailCellEl(row);

    $.ajax({
        url: "../data/DataService.aspx?method=GetEmployee&id=" + row.id,
        success: function (text) {
            var o = mini.decode(text);
            //生成详细信息html

            if (o.gender == 1) o.gender_name = "男";
            else if (o.gender == 2) o.gender_name = "女";
            else o.gender_name = "";

            o.birtyday_name = o.birthday ? mini.formatDate(o.birthday, "yyyy-MM-dd") : "";

            td.innerHTML = "";
            $("#formTemplate").tmpl(o).appendTo(td); ;
        }
    });
}
posted @ 2012-11-12 15:55 nikofan 阅读(2521) | 评论 (0)编辑 收藏

表格:汇总行
                
                      

参考示例汇总行
           

Javascript处理          

通常在表格的"load"数据加载完成事件中,更新表格的汇总信息:

grid.on("load", onGridLoad);

function onGridLoad(e) {
    var result = e.result;
    var grid = e.sender;

    var cellEl = grid.getSummaryCellEl("ageColumn");
    cellEl.style.cssText = "text-align:right";
    cellEl.innerHTML = "<span style='color:Brown;'>"
                    + 'Min=' + result.minAge + "<br/>"
                    + 'Max=' + result.maxAge + "<br/>"
                    + 'Avg=' + result.avgAge + "<br/>"
                    + "</span>";

    var cellEl = grid.getSummaryCellEl("totalColumn");
    cellEl.innerHTML = "总员工数:" + result.total;
}
       
           

服务端数据处理          

在服务端返回表格分页数据时,我们额外增加了一些属性,比如minAge、maxAge、avgAge等,代码如下:

public Hashtable SearchEmployees(string key, int index, int size, string sortField, string sortOrder)
{        
    ArrayList employees = ......;   //分页后的数据
    int totalCount = ......;        //总记录数

    Hashtable result = new Hashtable();
    result["data"] = employees;
    result["total"] = totalCount;

    //生成一些汇总信息
    ArrayList ages = DBUtil.Select("select min(age) as minAge, max(age) as maxAge, avg(age) as avgAge from t_employee");
    Hashtable ageInfo = ages[0] as Hashtable;
    result["minAge"] = ageInfo["minAge"];
    result["maxAge"] = ageInfo["maxAge"];
    result["avgAge"] = ageInfo["avgAge"];

    return result;
}
posted @ 2012-11-09 16:07 nikofan 阅读(4500) | 评论 (1)编辑 收藏

表格:过滤行
                
                     

参考示例行过滤
           

一:定义过滤器         

设置表格"showFilter"属性为"true"后,可以在列配置对象上定义过滤器对象:

<div field="name" width="120" headerAlign="center" allowSort="true">姓名
    <!--定义此列的过滤器对象,注意property="filter"-->
    <input id="nameFilter" property="filter" class="mini-textbox" onvaluechanged="onNameFilterChanged" style="width:100%;" />
</div>   
           

二:处理"valuechanged"事件      

在"onvaluechanged"值变化时,会自动调用一个过滤方法onNameFilterChanged。此方法由开发者实现,如下:

function onNameFilterChanged(e) {
    var textbox = e.sender;
    var key = textbox.getValue();

    grid.load({ key: key });
}
posted @ 2012-11-08 15:46 nikofan 阅读(4766) | 评论 (10)编辑 收藏

仅列出标题
共8页: 上一页 1 2 3 4 5 6 7 8 下一页