Demo.html:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
  <script src="Scripts/tmpl/jquery.tmpl.js" type="text/javascript"></script>
    <script src="Scripts/menu/contextmenu.pack.js" type="text/javascript"></script>
    <link href="Content/menu/cm_default/style.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/flexigrid/flexigrid.js" type="text/javascript"></script>
    <link href="Content/flexigrid/flexigrid.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <table id="flex1" style="display: none;">
    </table>
    <div id="pager" class="page"></div>
    <script type="text/javascript">
        var process = {
            add: function (d) {
                 alert("add");
                //$.post('/Ajax/Add', {}, function (r) { if (r == "") d.sender.flexReload(); });
            },
            remove: function (d) {
                 alert("remove");
//                $.post('/Ajax/Remove', { 'id': d.row.id }, function (r) { if (r == "") d.sender.flexReload(); });
            },
            reload: function (d) {
                d.sender.flexReload();
            },
            fourp: function (d) {
                d.sender.flexGetPage(4, { a: 1, b: 2 });
            }
        };
        (function () {
            var cols = [
              { display: 'Id', name: 'Id', width: 40, sortable: true, align: 'center' },
				{ display: 'User Name', name: 'Name', width: 180, sortable: false, align: 'left' },
				{ display: 'User Email', name: 'Email', width: 120, sortable: false, align: 'left' },
				{ display: 'User Age', name: 'Age', width: 130, sortable: false, align: 'left'},
                {name: 'numcode',    process: function (e, c) {
                    $(e).html("").append('<span style=\\\'color:red\\\'> ${name} - ${age} {{if age==1}} [] {{/if}}</span>', c);
                }, display: 'Operation'}];
            $("#flex1").gridext('GetEntity.txt', cols, '#tablemenu', process,
			 { usedefalutpager: false, rp: 10, autoload: true, colResize: true, colMove: true, pager: "#pager" }); ;
        })();
    </script>
        <ul id="tablemenu" class="jeegoocontext cm_default">
        <li id="add">随机添加一条数据</li>
        <li id="remove">删除此条</li>
        <li id="reload">刷新</li>
        <li id="fourp">4页</li>
        <li id="al5">all
            <ul>
                <li>1111</li>
                <li>222</li>
                <li>333</li>
            </ul>
        </li>
    </ul>
</body>
</html>


Entity.txt (json)
{
"page":1,
"total":1000,
"rows":[
        {"id":"0","cell":["0","fe58126e-5a83-4153-8b22-55ee957c706d","497ca746-1310-415d-a6dc-99aadae29571","0","1"]},
        {"id":"1","cell":["1","7dd83642-24fb-4eef-963c-82ca11b4734f","e310693c-6ad3-4b75-9b51-ec70e84be75f","1","1"]},
        {"id":"2","cell":["2","1f5e1411-9c39-451f-85a4-b323d5bdb09f","83f480ea-bd16-45bc-a624-1991a26f9997","2","1"]},
        {"id":"3","cell":["3","24eba252-005d-4669-97b2-9ea28d4a8b51","603684e1-13d1-49cb-9cb2-24baa4c0c31d","3","1"]},
        {"id":"4","cell":["4","2c5b434a-de1d-423a-930d-260a23cb5854","f9b3d5c5-309d-404c-8f68-52a16a9fa972","4","1"]},
        {"id":"5","cell":["5","74258c19-34ff-452b-b6a7-d52564439515","b66576cc-2d39-4e62-9407-c9ee02f5b421","5","1"]},
        {"id":"6","cell":["6","e571e3a6-b59b-47d9-a9c6-4ff4b75a33c6","cb4f1c81-1094-41f1-b025-4d76c5bf76dd","6","1"]},
        {"id":"7","cell":["7","2ccfc7db-10e0-42ac-a433-7f0b420705e3","46951135-3441-4f6d-8b5f-9cc24b2fd08e","7","1"]},
        {"id":"8","cell":["8","3f7ef500-b58b-402f-9d7e-9ca1f864362c","b098cdc2-9747-4ab0-a9c7-2f863dc1ddf3","8","1"]},
        {"id":"9","cell":["9","1a014f6b-22e5-4a00-95d0-8bf101153dac","ec120ca9-8da3-4835-a73a-9201f57f29f8","9","1"]}
],
"keys":["Id","Email","Name","Age"]
}


Last edited May 28, 2010 at 8:06 AM by chsword, version 7

Comments

No comments yet.