前端框架jqwidgets的使用-jqxgrid

IT农民 03-28 120

前言：

今天大家对“jquerygrid使用”可能比较着重，你们都需要分析一些“jquerygrid使用”的相关知识。那么小编同时在网摘上搜集了一些有关“jquerygrid使用””的相关文章，希望看官们能喜欢，姐妹们快快来了解一下吧！

效果图

需引入的js部分：

HTML部分：

JAVASCRIPT部分：

var data = new Array();

var firstNames = [

"Andrew", "Nancy"];

var lastNames = [

"Fuller", "Davolio"];

var productNames = [

"Black Tea", "Green Tea"];

var priceValues = [

"2.25", "1.5"];

for (var i = 0; i < 10; i++) {

var row = {};

row["firstname"] = firstNames;

row["lastname"] = lastNames;

row["productname"] = productNames;

row["price"] = 2;

row["quantity"] = 4;

row["total"] = 2 * 4;

data[i] = row;

}

var source = {

localdata: data,

datatype: "array"

};

var dataAdapter = new $.jqx.dataAdapter(source, {

loadComplete: function (data) {},

loadError: function (xhr, status, error) {}

});

$("#jqxgrid").jqxGrid({

theme: 'energyblue',

source: dataAdapter,

width: 500,

columns: [{

text: 'First Name',

datafield: 'firstname',

width: 100

}, {

text: 'Last Name',

datafield: 'lastname',

width: 100

}, {

text: 'Product',

datafield: 'productname',

width: 180

}, {

text: 'Quantity',

datafield: 'quantity',

width: 80,

cellsalign: 'right'

}, {

text: 'Unit Price',

datafield: 'price',

width: 90,

cellsalign: 'right',

cellsformat: 'c2'

}, {

text: 'Total',

datafield: 'total',

width: 100,

cellsalign: 'right',

cellsformat: 'c2'

}]

});

本文地址：http://www.longkongtuishu.com/caed5BAVsAlAAC1M.html

标签： #jquerygrid使用 #dropdownlistjs事件