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>