grid

參考示例：Pager：分頁(yè)控件

創(chuàng)建代碼   

<div class="mini-pager" style="width:600px;background:#ccc;" 
    totalCount="123" onpagechanged="onPageChanged" sizeList="[5,10,20,100]"
    showTotalCount="true"
    >        
</div>    
<script type="text/javascript">
    function onPageChanged(e) {
        alert(e.pageIndex+":"+e.pageSize);
    }       
</script>

參考示例：OutlookTree：折疊樹(shù)

創(chuàng)建OutlookTree     

<div id="leftTree" class="mini-outlooktree" url="../data/outlooktree.txt" onnodeselect="onNodeSelect"
    textField="text" idField="id" parentField="pid">
</div>
          

數(shù)據(jù)格式

[
    {id: "user", text: "用戶管理"},
        
    {id: "lists", text: "Lists", pid: "user" },
            
    {id: "datagrid", text: "DataGrid", pid: "lists"},            
    {id: "tree", text: "Tree" , pid: "lists"},
    {id: "treegrid", text: "TreeGrid " , pid: "lists"},
        
    {id: "layouts", text: "Layouts", expanded: false, pid: "user"},
        
    {id: "panel", text: "Panel", pid: "layouts"},
    {id: "splitter", text: "Splitter", pid: "layouts"},
    {id: "layout", text: "Layout ", pid: "layouts"},
        
    { id: "right", text: "權(quán)限管理"},
        
    {id: "base", text: "Base", expanded: false, pid: "right" },
                
    {id: "ajax", text: "Ajax", pid: "base"},
    {id: "json", text: "JSON", pid: "base"},
    {id: "date", text: "Date", pid: "base"},
        
    {id: "forms", text: "Forms", expanded: false, pid: "right"},
                
    {id: "button", text: "Button", pid: "forms"},
    {id: "listbox", text: "ListBox", pid: "forms"},
    {id: "checkboxlist", text: "CheckBoxList", pid: "forms"},
    {id: "radiolist", text: "RadioList", pid: "forms"},
    {id: "calendar", text: "Calendar", pid: "forms"}                
]

參考示例：OutlookMenu：折疊菜單

創(chuàng)建OutlookMenu        

<div class="mini-outlookmenu" url="../data/outlookmenu.txt" onitemselect="onItemSelect"
    idField="id" parentField="pid" textField="text">
</div>

            

數(shù)據(jù)結(jié)構(gòu)

[
    { id: "user", text: "用戶管理"},
    { id: "addUser", pid: "user", text: "增加用戶", iconCls: "icon-add", url: "../navbartree/navbartree.html" },
    { id: "editUser", pid: "user", text: "修改用戶", iconCls: "icon-edit", url: "../buttonedit/openwindow.html" },
    { id: "removeUser", pid: "user", text: "刪除用戶", iconCls: "icon-remove", url: "../datagrid/datagrid.html" },
        
    { id: "right", text: "權(quán)限管理"},
    { id: "addRight", pid: "right", text: "查詢權(quán)限", iconCls: "Note", url: "../navbartree/navbartree.html", iconPosition: "top" },
    { id: "editRight", pid: "right", text: "操作權(quán)限", iconCls: "Reports", url: "../buttonedit/openwindow.html", iconPosition: "top" }        
]

參考示例：OutlookBar：折疊面板組

創(chuàng)建OutlookBar   

<div id="outlookbar1" class="mini-outlookbar " activeIndex="0" style="width:180px;height:250px;" autoCollapse="true">
    <div title="權(quán)限管理">            
        1
    </div>
    <div title="用戶管理">
        2
    </div>
</div>

參考示例：Tabs：懶加載頁(yè)面

創(chuàng)建Tabs

<ul id="tree1" class="mini-tree" url="../data/tree.txt" style="width:300px;padding:5px;" 
    showTreeIcon="true" textField="text" idField="id" >        
</ul>

                    

數(shù)據(jù)結(jié)構(gòu)      

通過(guò)url返回的數(shù)據(jù)結(jié)構(gòu)如下：

[
    {title: "Tab1", url: "../tabs/pages/page1.html", refreshOnClick: true},
    {title: "Tab2", url: "../tabs/pages/page2.html", showCloseButton: true},
    {title: "Tab3", url: "../tabs/pages/page3.html"},
    {title: "Tab4", url: "../tabs/pages/page4.html"},
    {title: "Tab5", url: "../tabs/pages/page5.html"}
]

參考示例：ContextMenu：右鍵菜單

創(chuàng)建ContextMenu

<ul id="contextMenu" class="mini-contextmenu" >
    <li>
        <span >操作</span>
        <ul>
            <li iconCls="icon-new" onclick="onItemClick">新建</li>
            <li class="separator"></li>
            <li iconCls="icon-add" onclick="onItemClick">增加</li>    
            <li iconCls="icon-edit" onclick="onItemClick">修改</li>
            <li iconCls="icon-remove" onclick="onItemClick">刪除</li>                      
        </ul>
    </li>
    <li class="separator"></li>
    <li iconCls="icon-open" >打開(kāi)</li>
    <li iconCls="icon-remove" >關(guān)閉</li>
</ul>

Javascript處理

function onItemClick(e) {
    var item = e.sender;
    alert(item.getText());     
}

window.onload = function () {
    $("#region1").bind("contextmenu", function (e) {
        var menu = mini.get("contextMenu");
        menu.showAtPos(e.pageX, e.pageY);
        return false;
    });
}

創(chuàng)建菜單       

<ul id="menu2" class="mini-menubar" style="width:100%;">
    <li>
        <span >文件(F)</span>
        <ul>
            <li onclick="onItemClick">
                <span >新建</span>
                <ul>
                    <li iconCls="icon-new" onclick="onItemClick">文件</li>
                    <li onclick="onItemClick">項(xiàng)目</li>
                    <li onclick="onItemClick">網(wǎng)站</li>
                </ul>
            </li>
            <li class="separator"></li>
            <li iconCls="icon-cut" onclick="onItemClick">Cut</li>
            <li iconCls="icon-add" onclick="onItemClick">Add</li>
            <li iconCls="icon-remove" onclick="onItemClick">Close</li>
        </ul>
    </li>
    <li class="separator"></li>
    <li >編輯(E)</li>
    <li  onclick="onItemClick">查看(V)</li>
    <li iconCls="icon-help" onclick="onItemClick">幫助(H)</li>
</ul>

創(chuàng)建菜單         

<ul id="menu1" class="mini-menubar" style="width:100%;" 
    url="../data/listMenu.txt" idField="id" parentField="pid">
</ul>

url數(shù)據(jù)格式

[
    { id: "1", text: "文件(F)"},        
    '-',
    { id: "2", text: "新建", iconCls: "icon-new", pid: "1"},    
    { id: "3", text: "文件", pid: "2"},
    { id: "4", text: "文件夾", pid: "2"},        
    { id: "5", text: "打開(kāi)", iconCls: "icon-folderopen", pid: "1"},
    { id: "6", text: "保存", pid: "1"},
    { id: "7", text: "關(guān)閉", pid: "1"},
        
    { id: "8", text: "編輯(E)"},
    { id: "9", text: "剪切", iconCls: "icon-cut", pid: "8"},
    { id: "10", text: "復(fù)制", pid: "8"},
    { id: "11", text: "粘貼", pid: "8"},
        
    { id: "12", text: "查看(V)"},
    { id: "13", text: "幫助(H)", iconCls: "icon-help"}
]

參考示例：ToolBar：工具欄
                   

創(chuàng)建工具欄      

<div class="mini-toolbar">
    <a class="mini-button" iconCls="icon-add">增加</a>
    <a class="mini-button" iconCls="icon-edit">修改</a>
    <a class="mini-button" iconCls="icon-remove">刪除</a>
    <span class="separator"></span>
    <a class="mini-button" plain="true">增加</a>
    <a class="mini-button" plain="true">修改</a>
    <a class="mini-button" plain="true">刪除</a>
    <span class="separator"></span>
    <input class="mini-textbox" />   
    <a class="mini-button" plain="true">查詢</a>
</div>

            

復(fù)雜工具欄

<div id="toolbar1" class="mini-toolbar" style="padding:2px;">
    <table style="width:100%;">
        <tr>
        <td style="width:100%;">
            <a class="mini-menubutton" plain="true" menu="#popupMenu">文件</a>
            <a class="mini-button" iconCls="icon-addfolder" plain="true" enabled="false">增加</a>
            <a class="mini-button" iconCls="icon-edit" plain="true">修改</a>
            <a class="mini-button" iconCls="icon-remove" plain="true">刪除</a>
            <span class="separator"></span>
            <a class="mini-button" iconCls="icon-reload" plain="true">刷新</a>
            <a class="mini-button" iconCls="icon-download" plain="true">下載</a>
        </td>
        <td style="white-space:nowrap;"><label style="font-family:Verdana;">Filter by: </label>
            <input class="mini-textbox" />
            </td>
        </tr>
    </table>
</div>

參考示例: TreeGrid:節(jié)點(diǎn)拖拽    
                

創(chuàng)建代碼    

<div id="treegrid1" class="mini-treegrid" style="width:600px;height:280px;"     
    url="../data/tasks.txt" showTreeIcon="true" 
    treeColumn="taskname" idField="UID" parentField="ParentTaskUID" resultAsTree="false"
    allowDrag="true" allowDrop="true">
    <div property="columns">
        <div type="indexcolumn"></div>
        <div name="taskname" field="Name" width="200">任務(wù)名稱</div>
        <div field="Duration" width="100">工期</div>
        <div field="Start" width="100" dateFormat="yyyy-MM-dd">開(kāi)始日期</div>
        <div field="Finish" width="100" dateFormat="yyyy-MM-dd">完成日期</div>
    </div>
</div>                     

• allowDrag：允許拖拽節(jié)點(diǎn)               
• allowDrop：允許投放節(jié)點(diǎn)

監(jiān)聽(tīng)處理"drawcell"事件         

使用"drawcell"事件，可以自定義單元格內(nèi)容、樣式、行樣式等。

function onDrawCell(e){
    var node = e.node,
        column = e.column,
        field = e.field,
        value = e.value;

    //格式化日期
    if (field == "Finish") {
        if (mini.isDate(value)) e.cellHtml = mini.formatDate(value, "yyyy年MM月dd日");
    }
    //工期
    if (field == "Duration") {
        e.cellHtml = value + "天";
    }
    //進(jìn)度
    if (field == "PercentComplete") {
        e.cellHtml = '<div class="progressbar">'
                        + '<div class="progressbar-percent" style="width:' + value + '%;"></div>'
                        + '<div class="progressbar-label">' + value + '%</div>'
                    +'</div>';
    }
};

創(chuàng)建代碼

<div id="treegrid1" class="mini-treegrid" style="width:600px;height:250px;"     
    url="../data/TreeService.aspx?method=LoadNodes" showTreeIcon="true" textField="text" idField="id" 
    treeColumn="filename" onbeforeload="onBeforeTreeLoad">
    <div property="columns">
        <div name="filename" field="name" width="150">名稱</div>
        <div field="type" width="100">類型</div>
        <div field="size" width="100" dateFormat="yyyy-MM-dd">大小</div>
        <div field="createdate" width="100" dateFormat="yyyy-MM-dd">創(chuàng)建日期</div>
    </div>
</div>

服務(wù)端返回?cái)?shù)據(jù)

[{
    id: "form",
    text: "Form",
    ......
    isLeaf: false,                            //是否葉子節(jié)點(diǎn)：+和-號(hào)
    expanded: false                            //節(jié)點(diǎn)處于收縮狀態(tài)
},
......
]

懶加載事件         

當(dāng)用戶點(diǎn)擊"+"圖標(biāo)時(shí)，會(huì)自動(dòng)加載下一級(jí)節(jié)點(diǎn)，此時(shí)會(huì)把當(dāng)前節(jié)點(diǎn)id傳遞到后臺(tái)，也可以攔截加載事件，增加額外屬性：

function onBeforeTreeLoad(e) {
    var tree = e.sender;    //樹(shù)控件
    var node = e.node;      //當(dāng)前節(jié)點(diǎn)
    var params = e.params;  //參數(shù)對(duì)象

    //可以傳遞自定義的屬性
    params.myField = "123"; //后臺(tái)：request對(duì)象獲取"myField"
}

服務(wù)端處理          

服務(wù)端通過(guò)request獲取"id"屬性后，加載此節(jié)點(diǎn)的下一級(jí)節(jié)點(diǎn)數(shù)組，并通過(guò)JSON返回。

String id = Request["id"];
if (String.IsNullOrEmpty(id)) id = "-1";

//獲取下一級(jí)節(jié)點(diǎn)
String sql = "select * from plus_file where pid = '" + id + "' order by updatedate";
ArrayList folders = DBUtil.Select(sql);

//判斷節(jié)點(diǎn)，是否有子節(jié)點(diǎn)。如果有，則處理isLeaf和expanded。
for (int i = 0, l = folders.Count; i < l; i++)
{
    Hashtable node = (Hashtable)folders[i];
    String nodeId = node["id"].ToString();

    String sql2 = "select * from plus_file where pid = '" + nodeId + "' order by updatedate";
    ArrayList nodes = DBUtil.Select(sql2);

    if (nodes.Count > 0)
    {
        node["isLeaf"] = false;
        node["expanded"] = false;
    }

}

//返回JSON
String json = PluSoft.Utils.JSON.Encode(folders);
Response.Write(json);

參考示：過(guò)濾樹(shù)

filter節(jié)點(diǎn)過(guò)濾          

tree.filter(function (node) {
    var text = node.text ? node.text.toLowerCase() : "";
    if (text.indexOf(key) != -1) {
        return true;
    }
});

clearFilter取消過(guò)濾         

tree.clearFilter();

參考示例：樹(shù)右鍵菜單

一：創(chuàng)建ContextMenu     

<ul id="treeMenu" class="mini-contextmenu"  onbeforeopen="onBeforeOpen">        
    <li iconCls="icon-move" onclick="onMoveNode">移動(dòng)節(jié)點(diǎn)</li>
    <li class="separator"></li>
    <li>
        <span iconCls="icon-add">新增節(jié)點(diǎn)</span>
        <ul>
            <li onclick="onAddBefore">插入節(jié)點(diǎn)前</li>                
            <li onclick="onAddAfter">插入節(jié)點(diǎn)后</li>    
            <li onclick="onAddNode">插入子節(jié)點(diǎn)</li>                 
        </ul>
    </li>
    <li name="edit" iconCls="icon-edit" onclick="onEditNode">編輯節(jié)點(diǎn)</li>
    <li name="remove" iconCls="icon-remove" onclick="onRemoveNode">刪除節(jié)點(diǎn)</li>        
</ul>

二：設(shè)置contextmenu   

<ul id="tree1" class="mini-tree" url="../data/tree.txt" style="width:200px;padding:5px;" 
    showTreeIcon="true" textField="text" idField="id" 
    contextMenu="#treeMenu">        
</ul>

三：監(jiān)聽(tīng)beforeopen事件   

function onBeforeOpen(e) {
    var menu = e.sender;
    var tree = mini.get("tree1");

    var node = tree.getSelectedNode();
    if (!node) {
        e.cancel = true;
    }
    if (node && node.text == "Base") {
        e.cancel = true;
        //阻止瀏覽器默認(rèn)右鍵菜單
        e.htmlEvent.preventDefault();
        return;
    }

    ////////////////////////////////
    var editItem = mini.getbyName("edit", menu);
    var removeItem = mini.getbyName("remove", menu);
    editItem.show();
    removeItem.enable();

    if (node.id == "forms") {
        editItem.hide();
    }
    if (node.id == "lists") {
        removeItem.disable();
    }
}

參考示例：自定義節(jié)點(diǎn)

創(chuàng)建代碼         

<ul id="tree1" class="mini-tree" url="../data/tree.txt" style="width:200px;padding:5px;" 
    showTreeIcon="true" textField="text" idField="id" 
    ondrawnode="onDrawNode" showCheckBox="true">        
</ul>           

此時(shí)，我們監(jiān)聽(tīng)了“drawnode”事件。

drawnode 事件         

function onDrawNode(e) {
    var tree = e.sender;
    var node = e.node;

    var hasChildren = tree.hasChildren(node);

    //所有子節(jié)點(diǎn)加上超鏈接
    if (hasChildren == false) {
        e.nodeHtml = '<a  + node.id + '.html" target="_blank">' + node.text + '</a>';
    }

    //父節(jié)點(diǎn)高亮顯示；子節(jié)點(diǎn)斜線、藍(lán)色、下劃線顯示
    if (hasChildren == true) {
        e.nodeStyle = 'font-weight:bold;';
    } else {
        e.nodeStyle = "font-style:italic;"; //nodeStyle
        e.nodeCls = "blueColor";            //nodeCls
    }

    //修改默認(rèn)的父子節(jié)點(diǎn)圖標(biāo)
    if (hasChildren == true) {
        e.iconCls = "folder";
    } else {
        e.iconCls = "file";
    }

    //父節(jié)點(diǎn)的CheckBox全部隱藏
    if (hasChildren == true) {
        e.showCheckBox = false;
    }
}

參考示例：節(jié)點(diǎn)拖拽投放

創(chuàng)建代碼          

<ul id="tree1" class="mini-tree" url="../data/tree.txt" style="width:200px;padding:5px;" 
    showTreeIcon="true" textField="text" idField="id" 
    allowDrag="true" allowDrop="true">
</ul>

• allowDrag：允許拖拽節(jié)點(diǎn)               
• allowDrop：允許投放節(jié)點(diǎn)

           

參考示例：多選樹(shù)：CheckBoxTree

創(chuàng)建代碼           

<ul id="tree2" class="mini-tree" url="../data/tree.txt" style="width:300px;" 
    showTreeIcon="true" textField="text" idField="id" showCheckBox="true"
    onbeforenodecheck="onBeforeNodeCheck" checkRecursive="true" allowSelect="false" enableHotTrack="false">        
</ul>                       

• showCheckBox：顯示樹(shù)形的checkbox
               
• checkRecursive：決定是否聯(lián)動(dòng)選擇
                    

設(shè)置多選

tree.setValue("forms,button,lists");

獲取多選

var value = tree.getValue();
alert(value);

參考示例：增加、刪除、修改節(jié)點(diǎn)

增加節(jié)點(diǎn)          

var tree = mini.get("tree1");
var node = tree.getSelectedNode();
var newNode = {};
tree.addNode(newNode, "before", node);

刪除節(jié)點(diǎn)   

var node = tree.getSelectedNode();
tree.removeNode(node);

編輯節(jié)點(diǎn)    

var node = tree.getSelectedNode();            
tree.beginEdit(node);  

移動(dòng)節(jié)點(diǎn)   

tree.moveNode(node, targetNode, "before");

參考示例：懶加載樹(shù)

創(chuàng)建代碼                    

<ul id="tree1" class="mini-tree" url="../data/TreeService.aspx?method=LoadNodes" style="width:300px;height:200px;padding:5px;" 
    showTreeIcon="true" textField="name" idField="id" onbeforeload="onBeforeTreeLoad" 
        >        
</ul>

服務(wù)端返回?cái)?shù)據(jù)

[{
    id: "form",
    text: "Form",
    ......
    isLeaf: false,                            //是否葉子節(jié)點(diǎn)：+和-號(hào)
    expanded: false                            //節(jié)點(diǎn)處于收縮狀態(tài)
},
......
]

懶加載事件          

當(dāng)用戶點(diǎn)擊"+"圖標(biāo)時(shí)，會(huì)自動(dòng)加載下一級(jí)節(jié)點(diǎn)，此時(shí)會(huì)把當(dāng)前節(jié)點(diǎn)id傳遞到后臺(tái)，也可以攔截加載事件，增加額外屬性：

function onBeforeTreeLoad(e) {
    var tree = e.sender;    //樹(shù)控件
    var node = e.node;      //當(dāng)前節(jié)點(diǎn)
    var params = e.params;  //參數(shù)對(duì)象

    //可以傳遞自定義的屬性
    params.myField = "123"; //后臺(tái)：request對(duì)象獲取"myField"
}

服務(wù)端處理        

服務(wù)端通過(guò)request獲取"id"屬性后，加載此節(jié)點(diǎn)的下一級(jí)節(jié)點(diǎn)數(shù)組，并通過(guò)JSON返回。

String id = Request["id"];
if (String.IsNullOrEmpty(id)) id = "-1";

//獲取下一級(jí)節(jié)點(diǎn)
String sql = "select * from plus_file where pid = '" + id + "' order by updatedate";
ArrayList folders = DBUtil.Select(sql);

//判斷節(jié)點(diǎn)，是否有子節(jié)點(diǎn)。如果有，則處理isLeaf和expanded。
for (int i = 0, l = folders.Count; i < l; i++)
{
    Hashtable node = (Hashtable)folders[i];
    String nodeId = node["id"].ToString();

    String sql2 = "select * from plus_file where pid = '" + nodeId + "' order by updatedate";
    ArrayList nodes = DBUtil.Select(sql2);

    if (nodes.Count > 0)
    {
        node["isLeaf"] = false;
        node["expanded"] = false;
    }

}

//返回JSON
String json = PluSoft.Utils.JSON.Encode(folders);
Response.Write(json);

Html標(biāo)簽創(chuàng)建節(jié)點(diǎn)  

<ul id="tree2" class="mini-tree" style="width:200px;padding:5px;" showTreeIcon="true">
    <li>
        <span>MiniUI</span>
        <ul>
            <li>
                <span expanded="false">Form</span>
                <ul>                           
                    <li>ComboBox</li>
                    <li>DatePicker</li>
                    <li>Spinner</li>
                    <li>TreeSelect</li>
                </ul>
            </li>
            <li>
                <span expanded="false">Lists</span>
                <ul>
                    <li><a href="../datagrid/datagrid.html" target="_blank" style="color:Blue;text-decoration:underline;">DataGrid</a></li>
                    <li>Tree</li>
                </ul>
            </li>    
            <li>
                <span expanded="false">Layouts</span>
                <ul>
                    <li>Panel</li>
                    <li>Splitter</li>
                    <li>Layout</li>
                </ul>
            </li>         
            <li>
                <span expanded="false">Navigations</span>
                <ul>
                    <li>Tabs</li>
                    <li>NavBar</li>
                    <li>Menu</li>
                    <li>Pager</li>                            
                </ul>
            </li>             
        </ul>
    </li>                       
</ul>

參考示例：創(chuàng)建樹(shù)：本地JSON

創(chuàng)建Tree          

沒(méi)有設(shè)置url。

<ul id="tree3" class="mini-tree" style="width:300px;padding:5px;" 
    showTreeIcon="true" textField="text" idField="id" >        
</ul>
          
                    

Javascript設(shè)置數(shù)據(jù)

var tree3 = mini.get("tree3");
tree3.loadData([
    { id: "lists", text: "Lists", expanded: false,
        children: [
            { id: "datagrid", text: "DataGrid" },
            { id: "tree", text: "Tree" },
            { id: "treegrid", text: "TreeGrid " }
        ]
            },
    { id: "layouts", text: "Layouts", expanded: false,
        children: [
            { id: "panel", text: "Panel" },
            { id: "splitter", text: "Splitter" },
            { id: "layout", text: "Layout " }
        ]
    },
    { id: "navigations", text: "Navigations", expanded: false,
        children: [
            { id: "pager", text: "Pager" },
            { id: "tabs", text: "Tabs" },
            { id: "navbar", text: "NavBar" },
            { id: "menu", text: "Menu" }
        ]
    }
]);

參考示例： 列表數(shù)據(jù)生成Tree

創(chuàng)建Tree           

<ul id="tree1" class="mini-tree" url="../data/listTree.txt" style="width:200px;padding:5px;" 
    showTreeIcon="true" textField="text" idField="id" parentField="pid" resultAsTree="false"  
    >
</ul>          

注意：idField、parentField、resultAsTree屬性。

數(shù)據(jù)結(jié)構(gòu)：列表          

通過(guò)url返回的數(shù)據(jù)結(jié)構(gòu)如下：

[
    {id: "base", text: "Base", expanded: false},    
    {id: "ajax", text: "Ajax", pid: "base"},
    {id: "json", text: "JSON", pid: "base"},
    ......
]

參考示例：Tree 樹(shù)形控件

創(chuàng)建Tree           

<ul id="tree1" class="mini-tree" url="../data/tree.txt" style="width:300px;padding:5px;" 
    showTreeIcon="true" textField="text" idField="id" >        
</ul>
       
            

數(shù)據(jù)結(jié)構(gòu)：樹(shù)形          

通過(guò)url返回的數(shù)據(jù)結(jié)構(gòu)如下：

[
    {id: "base", text: "Base", expanded: false,
        children: [
            {id: "ajax", text: "Ajax"},
            {id: "json", text: "JSON"},
            {id: "date", text: "Date"},
            {id: "control", text: "Control"},
            {id: "messagebox", text: "MessageBox"},
            {id: "window", text: "Window"}
        ]
    },
    ...
]

參考示例：DataBinding：數(shù)據(jù)綁定

數(shù)據(jù)綁定         

數(shù)據(jù)綁定后：當(dāng)表格變化時(shí)，控件值跟隨變動(dòng)；控件值修改時(shí)，表格單元格內(nèi)容變動(dòng)。
                最后使用表格的數(shù)據(jù)提交保存，達(dá)到：多次修改、一次保存的效果。

//綁定表單
var db = new mini.DataBinding();
db.bindForm("editForm1", grid);

//綁定控件
db.bindField(textbox, grid, "username");

參考示例：合并單元格

調(diào)用方法：margeCells。如下代碼：

grid.on("load", onLoad);
function onLoad(e) {
    var grid = e.sender;

    var marges = [
        { rowIndex: 1, columnIndex: 0, rowSpan: 1, colSpan: 2 },
        { rowIndex: 3, columnIndex: 0, rowSpan: 4, colSpan: 3 }
    ];

    grid.margeCells(marges);
}

參考示例：分組

調(diào)用分組方法：groupBy。如下代碼：

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

參考示例：右鍵菜單

一：創(chuàng)建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">編輯節(jié)點(diǎn)</li>
    <li name="remove" iconCls="icon-remove" onclick="onRemove">刪除節(jié)點(diǎn)</li>        
</ul>

二：設(shè)置表格contextmenu

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

三：監(jiān)聽(tīng)beforeopen事件          

監(jiān)聽(tīng)右鍵菜單的beforeopen事件，可以對(duì)右鍵菜單精確控制。

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;
        //阻止瀏覽器默認(rèn)右鍵菜單
        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

參考示例：單元格編輯驗(yàn)證

一：設(shè)置編輯器驗(yàn)證規(guī)則

<div field="loginname" width="120" headerAlign="center" allowSort="true">員工帳號(hào)
    <input property="editor" class="mini-textbox" style="width:100%;" required="true" vtype="email"  />
</div>       

二：監(jiān)聽(tīng)處理cellcommitedit事件

//提交單元格編輯數(shù)據(jù)前激發(fā)
function onCellCommitEdit(e) {
    var editor = e.editor;
    editor.validate();
    if (editor.isValid() == false) {
        alert(editor.getErrorText());
        e.cancel = true;
    }
}
grid.on("cellcommitedit", onCellCommitEdit);

參考示例：CRUD之：彈出面板編輯

一：創(chuàng)建彈出編輯面板

<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;">員工帳號(hào)：</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>

二：面板操作          

彈出加載面板數(shù)據(jù)：

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("表單加載錯(cuò)誤");
    }
});

var form = new mini.Form("#editform");
var o = form.getData();

grid.loading("保存中，請(qǐng)稍后......");
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();

參考示例：CRUD之：行內(nèi)表單編輯

一：創(chuàng)建編輯表單

<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;">員工帳號(hào)：</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>

二：嵌入詳細(xì)行          

//顯示行詳細(xì)
grid.hideAllRowDetail();
grid.showRowDetail(row);
//將editForm元素，加入行詳細(xì)單元格內(nèi)
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("保存中，請(qǐng)稍后......");
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);
    }
});

參考示例：CRUD之：行編輯

一：創(chuàng)建單元格編輯器

<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">員工帳號(hào)
            <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">創(chuàng)建日期</div>                
    </div>
</div>            

比如：mini-textbox的property為"editor"，表示是此列的編輯器。

二：編輯操作

grid.beginEditRow(row);

grid.cancelEdit();

提交編輯數(shù)據(jù)：

var rowData = grid.getEditRowData(row);
grid.loading("保存中，請(qǐng)稍后......");
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);
    }
});