jQuery插件之我的flexiGrid

推荐阅读

基于jQuery的GridView-FlexiGrid的使用和改造（1）--如何使用，完全参数说明

以及后续文章

==========================================================

 

http://files.cnblogs.com/jianjialin/flexigrid样式和图片.rar

http://files.cnblogs.com/jianjialin/myFlexiGrid.js（修改后）

 

 

ajax传到后台的参数
var param = [
                     { name: 'page', value: p.newp }
                    , { name: 'rp', value: p.rp }
                    , { name: 'sortname', value: p.sortname }
                    , { name: 'sortorder', value: p.sortorder }
                    , { name: 'query', value: p.query }
                    , { name: 'qtype', value: p.qtype }
                    , { name: "DBField", value: dbfields_arr.join(',') }

　　　　　　　　, { name: "primaryKey", value: p.primaryKey }
//传回后台的一些参数（在原版的580行左右） 依次为， 页码（从1开始）、页大小、排序字段、查询值（放大镜那里输入的值）、查询值的字段、查询哪几个字段, 主键
                ];

 

 

 

后台的一些东西
{
        page:1,
        total:0,
        rows:[
          {id:'row2',cell:['col','col','col','col','col','col']},
          {id:'row3',cell:['col','col','col','col','col','col']},
          {id:'row1',cell:['col','col','col','col','col','col']}
           ]
        }
//json格式，page为页码，total记录数， rows详细数据
// id,可以用来存储该行的主键, cell 详细数据



private string getFlexigridJson(System.Data.DataTable dt) {
        System.Text.StringBuilder sb = new System.Text.StringBuilder();
        sb.Append("[");
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            sb.Append("{");
            sb.Append(string.Format("'id':'{0}','cell':[\"{1}\",\"{2}\",\"{3}\",\"{4}\"]", 

dt.Rows[i][context.Request.Form["primaryKey"]],

, dt.Rows[i]["UnitPrice"].ToString(), dt.Rows[i]["UnitPrice"].ToString(), dt.Rows[i]["UnitPrice"].ToString(), dt.Rows[i]["UnitPrice"].ToString()));
            if ((i + 1) == dt.Rows.Count)
                sb.Append("}");
            else
                sb.Append("},");
        }
        sb.Append("]");
        return sb.ToString();
    }

 

 

调用这个插件
var grid = $("#flex1").flexigrid
            (
            {
                url: 'handler.ashx',
                dataType: 'json',
                colModel: [
                { display: 'ProductID', name: 'ProductID', width: 40, sortable: true, align: 'center' },
                { display: 'ProductName', name: 'ProductName', width: 180, sortable: true, align: 'left' },
                { display: 'QuantityPerUnit', name: 'QuantityPerUnit', width: 120, sortable: true, align: 'left' },
                { display: 'UnitPrice', name: 'UnitPrice', width: 130, sortable: true, align: 'right' },
                { display: 'UnitPrice', name: 'UnitPrice', width: 30, sortable: true, align: 'right' },
                { display: '操作', name: 'null', width: 100, sortable: true, align: 'center' }
                ],
                buttons: [
                { name: 'Add', bclass: 'add', onpress: test },
                { name: 'Delete', bclass: 'delete', onpress: test }
                ],
                searchitems: [
                { display: 'ProductName', name: 'ProductName' },
                { display: 'ProductID', name: 'ProductID' }
                ],
                sortname: "ProductID",
                sortorder: "asc",
                usepager: true,
                title: '我的表格',
                useRp: true,
                rp: 50,
                showTableToggleBtn: true,
                width: 700,
                height:600,
                isShowCheckbox: true,
                primaryKey:"ProductID",
                alreadyCheckedPKs: ["1", "2", '5']
                
            }
            );

            }

 

 

其他参数
process: 数据显示前的处理函数
//{ display: '单价', name: 'UnitPrice', width: 100, sortable: true, align: 'right', process: formatMoney }
function formatMoney(tdDiv, pid) {
                var value = $(tdDiv).html();
                $(tdDiv).html("￥" + parseFloat(value).toFixed(2));
            } 

onSuccess: //成功构造出数据table后的执行函数

onChangeSort://改变排序的执行函数,返回当前排序列以及排序方式
onChangeSort(p.sortname, p.sortorder);

onError: //ajax请求数据库错误执行onError(data) data为后台返回值

还有

p.onChangePage(p.newp);

 

关于新加的isShowCheckbox

//点击按钮触发 onpress事件
返回两个值(buttonTypeName, 当前数据页的html)
例:
按钮{ name: 'Delete', bclass: 'delete', onpress: test }
则第一个参数为Delete, 第二个对象.innerHTML则为数据
设第二个数据为dataTb

$("$(".itemchk:checked",dataTb)
即可获得选中的checkBox数组 //.itemchk为第一列的checkbox所用的样式

 

 

====================================================================2009-11-26

新增加最后一列为按钮的功能

 

11-26添加
在首行添加
{ display: '操作', name: 'null', width: 100, sortable: true, align: 'center' }

在参数列表增加
lastColumnButtons:{"编辑":"edit","删除":"deleteFn"}
这是一个json对象，第一个为按钮的值，第二个为点击按钮调用某个方法

返回的是该行的主键

function edit(key) {
                alert("edit+" + key);
                alert($("#flex1 #row"+key).html());
            }
可以用
alert($("#flex1 #row"+key).html()); 得到该行的html
注：数据表的行id为 【 row主键 】