grid

参考示例：显示/隐藏列
            
           

通过设置表格的showColumn和hideColumn方法，可以显示、隐藏表格列。          

给列对象设置一个name：
<div name="loginnameColumn" field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号</div>    
           

在运行时调用方法显示和隐藏列：

//显示列
grid.showColumn("loginnameColumn");
//隐藏列
grid.hideColumn("loginnameColumn");  

参考示例：锁定列
           
           

通过设置表格的frozenStartColumn和frozenEndColumn属性，可以锁定住表格列：

grid.setFrozenStartColumn(0);
grid.setFrozenEndColumn(1);

参考示例：多表头                     
           

通过给"column"对象设置下一级"columns"列集合对象，轻松实现任意层级的多表头。如下代码：

<div id="datagrid1" class="mini-datagrid" style="width:700px;height:280px;" 
    url="../data/DataService.aspx?method=SearchEmployees" 
>
    <div property="columns">
        <div type="indexcolumn"></div>                
        <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号</div>    
        <div field="name" width="120" headerAlign="center" allowSort="true">姓名</div>    
        <div header="工作信息" headerAlign="center">
            <!--下一级columns-->
            <div property="columns">
                <div width="120" headerAlign="center">部门&职务
                    <!--下一级columns-->
                    <div property="columns">
                        <div field="dept_name" width="120">所属部门</div>
                        <div field="position_name" width="100">职位</div>
                    </div>
                </div>
                <div field="salary" width="100" allowSort="true">薪资</div>
            </div>
        </div>                    
    </div>
</div>

参考示例：自定义单元格

           

监听处理"drawcell"事件         

使用"drawcell"事件，可以自定义单元格内容、样式、行样式等。

grid.on("drawcell", function (e) {
    var record = e.record,
        column = e.column,
        field = e.field,
        value = e.value;

    //格式化日期
    if (field == "birthday") {
        if (mini.isDate(value)) e.cellHtml = mini.formatDate(value, "yyyy-MM-dd");

    }

    //给年龄，增加"岁"字符串
    if (field == "age") {
        e.cellHtml = value + "岁";
    }

    //给帐号列，增加背景色
    if (field == "loginname") {
        e.cellStyle = "background:#ecedef";
    }

    //超过1万工资，红色标识
    if (field == "salary" && value >= 10000) {
        e.cellStyle = "color:red;font-weight:bold;";
    }

    //显示学历
    if (field == "educational") {
        for (var i = 0, l = Educationals.length; i < l; i++) {
            var edu = Educationals[i];
            if (edu.id == value) {
                e.cellHtml = edu.name;
                break;
            }
        }
    }

    //action列，超连接操作按钮
    if (column.name == "action") {
        e.cellStyle = "text-align:center";
        e.cellHtml = '<a href="javascript:edit(\'' + record.id + '\')">Edit</a>&nbsp; '
                    + '<a href="javascript:del(\'' + record.id + '\')">Delete</a>'
    }

    //将性别文本替换成图片
    if (column.field == "gender") {
        if (e.value == 1) {
            e.cellHtml = "<span class='icon-female'></span>"
        } else {
            e.cellHtml = "<span class='icon-boy'></span>"
        }
    }

    //设置行样式
    if (record.gender == 1) {
        e.rowCls = "myrow";
    }
});

参考示例：数据表格    分页表格

表格列配置集合( columns )，是一个数组，如：[column, column, ...]。
其中一个column的配置参数如下表：
   

使用HTML配置方式，代码如下

<div id="datagrid1" class="mini-datagrid" style="width:700px;height:280px;" 
    url="../data/DataService.aspx?method=SearchEmployees"     
>
    <div property="columns">
        <div type="indexcolumn" ></div>
        <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号</div>    
        <div field="name" width="120" headerAlign="center" allowSort="true">姓名</div>                            
        <div field="gender" width="100" renderer="onGenderRenderer" align="center" headerAlign="center">性别</div>
        <div field="salary" width="100" allowSort="true">薪资</div>                                    
        <div field="age" width="100" allowSort="true">年龄</div>
        <div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div>                
    </div>
</div>  
    

我们也可以使用Javascript方式，代码如下：

var grid = new mini.DataGrid();
grid.set({
    url: "../data/DataService.aspx?method=SearchEmployees",
    style: "width:700px;height:280px;",
    columns: [
        { type: "indexcolumn" },
        { header: "员工帐号", field: "loginname", width: 120, headerAlign: "center", allowSort: true },
        { header: "姓名", field: "name", width: 120, headerAlign: "center", allowSort: true },
        { header: "性别", field: "gender", width: 100, align: "center", renderer: onGenderRenderer },
        { header: "薪资", field: "salary", width: 100, allowSort: true },
        { header: "年龄", field: "age", width: 100, allowSort: true },
        { header: "创建日期", field: "createtime", width: 100, headerAlign: "center", allowSort: true, dateFormat: "yyyy-MM-dd" }
    ]
});
grid.render(document.body);

Note：无论是使用Javascript还是HTML的方式创建表格，实现功能都是一样的。
   

参考示例：数据表格    分页表格

           

一：创建表格

<div id="datagrid1" class="mini-datagrid" style="width:700px;height:280px;" 
    url="../data/DataService.aspx?method=SearchEmployees"  idField="id" allowResize="true"
>
    <div property="columns">
        <div type="indexcolumn" ></div>
        <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号</div>    
        <div field="name" width="120" headerAlign="center" allowSort="true">姓名</div>                            
        <div field="gender" width="100" renderer="onGenderRenderer" align="center" headerAlign="center">性别</div>
        <div field="salary" width="100" allowSort="true">薪资</div>                                    
        <div field="age" width="100" allowSort="true">年龄</div>
        <div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div>                
    </div>
</div>   
            

二：数据加载

//从界面表单元素获取查询条件
grid.load({
    name: document.getElementById("key").value, 
    date: document.getElementById("date").value
});

grid.gotoPage(1, 10);   //跳转到第二页，每页20条数据            

字段排序：

//对"createtime"字段，进行降级排序
grid.sortBy("createtime", "desc");

三：服务端处理

//查询条件
string key = Request["name"];
//分页
int pageIndex = Convert.ToInt32(Request["pageIndex"]);
int pageSize = Convert.ToInt32(Request["pageSize"]);        
//字段排序
String sortField = Request["sortField"];
String sortOrder = Request["sortOrder"];

//数据库操作：使用查询条件、分页、排序等参数进行查询
Hashtable result = SearchEmployees(key, pageIndex, pageSize, sortField, sortOrder);

//返回JSON：将查询的结果，序列化为JSON字符串返回        
String json = PluSoft.Utils.JSON.Encode(result);
Response.Write(json);

四：数据结构          

在服务端处理后，获得的JSON结构如下：      

{
    total: 100,     //总记录数
     data: [         //分页后的数组数据
         { ... },
        { ... },
        ...
    ]
}

参考示例：FileUpload：文件上传控件

创建FileUpload  

<input id="fileupload1" class="mini-fileupload" name="Fdata" limitType="*.txt" 
    flashUrl="swfupload/swfupload.swf"
    uploadUrl="upload.aspx"
    onuploadsuccess="onUploadSuccess"
    />
            

服务端处理

// 获得程序路径
string tempFile = Request.PhysicalApplicationPath;

//找到目标文件对象
HttpPostedFile uploadFile = Request.Files["Fdata"];

// 如果有文件, 则保存到一个地址
if (uploadFile.ContentLength > 0)
{
    uploadFile.SaveAs(string.Format("{0}{1}{2}", tempFile, "demo\\fileUpload\\upload\\", uploadFile.FileName));
}

Response.Write(uploadFile.FileName +"("+DateTime.Now+")");    //可以返回一个JSON字符串, 在客户端做更多处理

    

参考示例：CheckBoxList：复选框组

创建CheckBoxList 

<div id="cbl1" class="mini-checkboxlist" repeatItems="3" repeatLayout="table"
    textField="text" valueField="id" value="cn,usa" onload="onLoad"
    url="../data/countrys.txt" >
</div>
            

数据结构

[
    { id: "usa", text: "美国" },
    { id: "cn", text: "中国" },
    { id: "jp", text: "日本" },
    { id: "en", text: "英国" },
    { id: "de", text: "德国" },
    { id: "fr", text: "法国" },
    { id: "ca", text: "加拿大" },
    { id: "at", text: "奥地利" },
    { id: "ch", text: "瑞士" }
]

ListBox：列表控件

参考示例：ListBox：列表控件

创建ListBox

<div id="listbox1" class="mini-listbox" style="width:150px;height:100px;"
    textField="text" valueField="id" 
    url="../data/countrys.txt">
</div>

多列

<div id="listbox2" class="mini-listbox" style="width:400px;height:120px;" 
    value="cn" onvaluechanged="onListBoxValueChanged" 
    url="../data/countrys.txt" showCheckBox="true" multiSelect="true" >     
    <div property="columns">
        <div header="ID" field="id"></div>
        <div header="国家" field="text"></div>
    </div>
</div>

参考示例：CheckBox：复选框            

           

创建CheckBox  

<div id="ck1" name="product" class="mini-checkbox" checked="true" text="MiniUI CheckBox" ></div>