- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Flexigrid Implemented </title> <link href="http://localhost/flex/images/css/styled.css" rel="stylesheet" type="text/css" /> <link href="http://localhost/flex/images/css/flexigrid.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://localhost/flex/images/scripts/jquery.pack.js"></script> <script type="text/javascript" src="http://localhost/flex/images/scripts/flexigrid.pack.js"></script> </head> <body> <script type="text/javascript"> $(document).ready(function(){ $("#flex1").flexigrid({ url: 'http://localhost/flex/ca/lists.php', dataType: 'json', sortname: 'cid', sortorder: 'asc', usepager: true, useRp: true, width: 'auto', height: 600, rp: 15, rpOptions: [10,15,20,25,40], pagestat: 'Displaying: {from} to {to} of {total} items.', blockOpacity: 0.5, title: 'Hello', showTableToggleBtn: true, colModel : [ {display: '卡号', name : 'cnum', sortable: true, width : 100, align: 'center'}, {display: '状态', name : 'state', sortable: true, width : 30, align: 'center'}, {display: '开始时间', name : 'begin_date', sortable: true, width : 80, align: 'center'}, {display: '结束时间', name : 'end_date', sortable: true, width : 80, align: 'center'}, {display: '初始金额', name : 'begin_money', sortable: true, width : 80, align: 'center'}, {display: '余额', name : 'plus_money', sortable: true, width : 80, align: 'center'}, {display: '充值金额', name : 'cram_money', sortable: true, width : 80, align: 'center'}, {display: '充值次数', name : 'cram_num', sortable: true, width : 60, align: 'center'}, {display: '消费金额', width : 80, align: 'center'}, {display: '消费次数', name : 'consume_num', sortable: true, width : 60, align: 'center'}, {display: '姓名', name : 'cname', sortable: true, width : 100, align: 'center'}, {display: '电话', name : 'ctel', sortable: true, width : 80, align: 'center'}, {display: 'Actions', width : 80, align: 'center'}, ], searchitems : [ {display: '卡号', name : 'cnum', isdefault: true}, {display: '姓名', name : 'cname'}, {display: '电话', name : 'ctel'}, ],buttons : [{name: '删除', bclass : 'delete', onpress : test}, {separator: true}, {name: '全选', bclass : 'add', onpress : test}, {separator: true}, {name: '取消选择', bclass : 'delete', onpress : test}, {separator: true}, ]}); }) </script> <table id="flex1" style="display:none"></table> </body> </html>
------解决方案--------------------
{display: '卡号', name : 'cnum', sortable: true, width : 100, align: 'center'},
{display: '状态', name : 'state', sortable: true, width : 30, align: 'center'},
{display: '开始时间', name : 'begin_date', sortable: true, width : 80, align: 'center'},
{display: '结束时间', name : 'end_date', sortable: true, width : 80, align: 'center'},
{display: '初始金额', name : 'begin_money', sortable: true, width : 80, align: 'center'},
{display: '余额', name : 'plus_money', sortable: true, width : 80, align: 'center'},
{display: '充值金额', name : 'cram_money', sortable: true, width : 80, align: 'center'},
{display: '充值次数', name : 'cram_num', sortable: true, width : 60, align: 'center'},
{display: '消费金额', width : 80, align: 'center'},
{display: '消费次数', name : 'consume_num', sortable: true, width : 60, align: 'center'},
{display: '姓名', name : 'cname', sortable: true, width : 100, align: 'center'},
{display: '电话', name : 'ctel', sortable: true, width : 80, align: 'center'},