删除products表的多少

用过ext的人都明白,gridpanel
能够很便利的达成大家web开荒中须求,并且完全的风格也是非常美丽貌的,所以大部分的控件都以足以向来使用的
 <script type=”text/javascript”>
     Ext.onReady(function(){
       var grid = new Ext.ux.AutoGridPanel({
                title:’Auto loading columnmodel’,
                renderTo: ‘testgrid’,
                height: 400,
                width: 500,
                loadMask: true,    
                autoSave: true,
                saveUrl: ‘saveconfig.php’,               
                store : new Ext.data.Store({
                    proxy: new Ext.data.HttpProxy({
                        url: ‘GenerateData.ashx?grid=grid’
                    }),

本文件为:ext_editgrid_products.js,用来显示,编辑,删除products表的多寡。

                reader: new Ext.data.JsonReader()
                })
            });
            grid.store.load({params: {meta: true}});    
        });     
    </script>
  <div>
        <div id=”testgrid”>
        </div>
        <input type=”button” onclick=”grid.store.load();”
value=”load” />
        <input type=”button” onclick=”grid.store.baseParams.style =
‘s1’; grid.store.load({params: {meta: true}});”
            value=”load+meta” />
        <input type=”button” onclick=”grid.store.baseParams.style =
‘s2’; grid.store.load({params: {meta: true}});”
            value=”load+alt meta” />
        <p>
            Try re-arranging/moving some collums, and reload the
page</p>
    </div>
以上正是页面上的写法,具体的能够参考ext api函数
后台的多寡是donet ashx页素不相识成的jason数据,数据的构造是这么的
  private string ProcessAutogrid(HttpContext context)
        {
            string result = string.Empty;
            context.Response.ContentType = “text/xml”;
            if (context.Request[“grid”] != null)
            {
                result =
“{\”metaData\”:{\”root\”:\”rows\”,\”id\”:0,\”totalProperty\”:\”totalCount\”,\”fields\”:[{\”name\”:\”company\”,\”header\”:\”Company\”,\”width\”:179,\”hidden\”:false},{\”name\”:\”price\”,\”header\”:\”Price\”,\”width\”:77,\”hidden\”:false},{\”name\”:\”info\”,\”header\”:\”Info\”,\”hidden\”:false,\”width\”:0},{\”name\”:\”date\”,\”header\”:\”Last
Updated\”,\”width\”:113,\”hidden\”:false},{\”name\”:\”id\”,\”type\”:\”int\”}]},\”rows\”:[{\”company\”:\”3m
Co\”,\”price\”:\”71.72\”,\”info\”:\”Hello\”,\”date\”:\”2007-06-10\”,\”id\”:null},{\”company\”:\”Alcoa
Inc\”,\”price\”:\”29.01\”,\”info\”:\”World\”,\”date\”:\”2007-06-11\”,\”id\”:null},{\”company\”:\”Altria
Group
Inc\”,\”price\”:\”83.81\”,\”info\”:\”!!!\”,\”date\”:\”2007-07-01\”,\”id\”:null},{\”company\”:\”Microsoft\”,\”price\”:\”100.10\”,\”info\”:\”testing\”,\”date\”:\”2007-08-01\”,\”id\”:null},{\”company\”:\”IBM\”,\”price\”:\”120.81\”,\”info\”:\”autogrid\”,\”date\”:\”2007-08-10\”,\”id\”:null},{\”company\”:\”NOVELL\”,\”price\”:\”211.15\”,\”info\”:\”paging\”,\”date\”:\”2007-09-03\”,\”id\”:null},{\”company\”:\”PHP
Group\”,\”price\”:\”453.11\”,\”info\”:\”and\”,\”date\”:\”2007-09-05\”,\”id\”:null},{\”company\”:\”MySQL
Group\”,\”price\”:\”233.41\”,\”info\”:\”more\”,\”date\”:\”2007-10-01\”,\”id\”:null},{\”company\”:\”BOTECH\”,\”price\”:\”843.81\”,\”info\”:\”testing…\”,\”date\”:\”2007-11-04\”,\”id\”:null}],\”totalCount\”:9}”;

复制代码 代码如下:

                #region test data

var productsgrid;
var productsstore;
var productslimit = 二五; //每页显示条数
var productsListPostUrl =
“/management/procrequest/Proc_products.ashx?action=getlist”;
var productsModifyPostUrl =
“/management/procrequest/Proc_products.ashx?action=modify”;
var productsDeletePostUrl =
“/management/procrequest/Proc_products.ashx?action=del”;
function initproductsGrid(containerid) {
Ext.menu.RangeMenu.prototype.icons = {
gt: ‘images/greater_then.png’,
lt: ‘images/less_then.png’,
eq: ‘images/equals.png’
};
Ext.grid.filter.StringFilter.prototype.icon = ‘images/find.png’;
Ext.QuickTips.init();
function formatDate(value) {
return value ? value.dateFormat(‘M d, Y’) : ”;
};
var fm = Ext.form;
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
sm,
{
id:’productId’,
header: ‘产品编号’,
dataIndex: ‘productId’,
sortable: true,
width:70,
editor: new fm.NumberField({
allowBlank: false,
allowNegative: false
})
},
{
header: ‘产品名称’,
dataIndex: ‘productName’,
sortable: true,
width:120,
editor: new fm.TextField({
allowBlank: false,
allowNegative: false
})
},
{
header: ‘金额’,
dataIndex: ‘money’,
sortable: true,
width:120,
editor: new fm.NumberField({
allowBlank: false,
allowNegative: false
})
},
{
header: ‘地址’,
dataIndex: ‘address’,
sortable: true,
width:120,
editor: new fm.TextField({
allowBlank: false,
allowNegative: false
})
},
{
header: ‘电话’,
dataIndex: ‘tel’,
sortable: true,
width:120,
editor: new fm.TextField({
allowBlank: false,
allowNegative: false
})
},
{
header: ‘备注’,
dataIndex: ‘remark’,
sortable: false,
width:550,
editor: new fm.myHtmlEditor({
allowBlank: false,
allowNegative: false
})
},
{
header: ‘端口’,
dataIndex: ‘port’,
sortable: true,
width:70,
editor: new fm.NumberField({
allowBlank: false,
allowNegative: false
})
}
]);
cm.defaultSortable = true;
/*
var Plant = Ext.data.Record.create([
]);
*/
productsstore = new Ext.data.JsonStore({
root: ‘list’,
totalProperty: ‘totalCount’,
idProperty: ‘productId’,
remoteSort: true,
fields: [
{name: ‘productId’ },{name: ‘productName’ },{name: ‘money’ },{name:
‘address’ },{name: ‘tel’ },{name: ‘remark’ },{name: ‘port’ }
],
proxy: new Ext.data.ScriptTagProxy({
url: productsListPostUrl
})
});
productsstore.setDefaultSort(‘productId’, ‘desc’);
var filters = new Ext.grid.GridFilters({
filters: [
{ type: ‘string’, dataIndex: ‘productId’ }, { type: ‘string’, dataIndex:
‘productName’ }, { type: ‘string’, dataIndex: ‘money’ }, { type:
‘string’, dataIndex: ‘address’ }, { type: ‘string’, dataIndex: ‘tel’ },
{ type: ‘string’, dataIndex: ‘remark’ }, { type: ‘string’, dataIndex:
‘port’ }
    ]
});
var pagingBar = new Ext.PagingToolbar({
pageSize: productslimit,
store: productsstore,
displayInfo: true,
displayMsg: ‘第 {0} – {1} 条记录,总共 {2} 条记录’,
emptyMsg: “未有记录”
});
productsgrid = new Ext.grid.EditorGridPanel({
store: productsstore,
cm: cm,
sm: sm,
bodyStyle: ‘width:100%’,
autoWidth: true,
height: 620,
renderTo: containerid,
autoExpandColumn: ‘productId’,
frame: true,
clicksToEdit: 2,
plugins: [filters],
loadMask: true,
enableTabScroll: true,
tbar: [{
text: ‘添加’,
tooltip: ‘增多新记录’,
iconCls: ‘add’,
handler:function(){
openTab(“addproducts”, “添加products”, null, initAddproductsForm);
}
},
‘-‘, {
text: ‘编辑’,
tooltip: ‘编辑选中记录’,
iconCls: ‘option’,
handler: function() {
var selectedRow = productsgrid.getSelectionModel().getSelections();
if (selectedRow) {
var obj = selectedRow[0];
if (!obj)
return;
var id = obj.get(“productId”);
openTab(“editproducts”, “编辑products”, null, initAddproductsForm, id,
obj);
}
}
},
‘-‘, {
text: ‘删除’,
tooltip: ‘删除选中记录’,
iconCls: ‘remove’,
handler: function() {
var selectedRow = productsgrid.getSelectionModel().getSelections();
Ext.MessageBox.confirm(‘Confirm’, ‘你规定要去除你所选定的’ +
selectedRow.length + “项吗?”, function(btn) {
if (btn == ‘yes’) {
if (selectedRow) {
for (var i = 0; i < selectedRow.length; i++) {
var obj = selectedRow[i];
var id = obj.get(“productId”);
productsstore.remove(obj);
$.ajax({
type: “POST”,
url: productsDeletePostUrl,
dataType: “json”,
data: “recordid=” + id,
success: function(msg) {
if (msg[0] && msg[0].string != “success”)
productsstore.reload();
}
});
}
}
}
});
}
}],
bbar: pagingBar
});
productsstore.load({ params: { start: 0, limit: productslimit} });
productsgrid.on(“afteredit”, afterEdit, productsgrid);
function afterEdit(obj) {
var r = obj.record; //获取被涂改的行
var fildname = obj.田野同志; //获取被改造的列
var id = r.get(“productId”);
var fildval = obj.value;
$.ajax({
type: “POST”,
url: productsModifyPostUrl,
dataType: “json”,
data: { action: ‘modify’, fildname: fildname, id: id, fildval: fildval
},
complete: function() {
},
success: function(msg) {
}
});
}
}

                //        result = “{\”items\” : [“

本文件为ext_add_products.js,用来增多或然编辑products表。

        //                + “{\”id\” : \”TRIST\” , \”port_id\” :
\”TRIST\” , \”port_name\” : \”ISTANBUL\” , \”region_id\” :
\”MED\” , \”country_id\” : \”TR\”},”
        //                + “{\”id\” : \”TRISTTR\” , \”port_id\”
: \”TRISTT\” , \”port_name\” : \”ISTANBULUYT\” , \”region_id\”
: \”MEDRTYTR\” , \”country_id\” : \”TRRYT\”},”
        //                + “{\”id\” : \”TRIZM\” , \”port_id\” :
\”TRIZM\” , \”port_name\” : \”IZMIR\” , \”region_id\” :
\”MED\” , \”country_id\” : \”TR\”}],”
        //                + ” \”metaData\” : { “

复制代码 代码如下:

        //   + ” \”fields\” : [“
        //   + ” {\”name\” : \”id\”, \”type\” : \”string\” } ,
{\”name\” : \”port_id\”, \”type\” : \”string\” } , {\”name\”
: \”port_name\”, \”type\” : \”string\” } ,{\”name\” :
\”region_id\”, \”type\” : \”string\” } ,{\”name\” :
\”country_id\”, \”type\” : \”string\” }],”

var productsAddPostUrl =
“/management/procrequest/Proc_products.ashx?action=add”;
var productsUpdatePostUrl =
“/management/procrequest/Proc_products.ashx?action=update”;
function initAddproductsForm(containerid, idstr, rowObj) {
if (!idstr)
idstr = containerid;
var productsForm = new Ext.FormPanel({
labelWidth: 100, // label settings here cascade unless overridden
url: productsAddPostUrl,
frame: true,
bodyStyle: ‘padding:5px 5px 0’,
autoWidth: true,
defaults: { width: ‘350’ },
defaultType: ‘textfield’,
renderTo: containerid,
items: [
{
xtype: ‘hidden’,
name: ‘productId’,
id: ‘productId’ + idstr,
value: null == rowObj ? null : rowObj.get(“productId”),
readOnly: true
}

        //   + ”  \”columns\” : [“
        //   + ” {\”header\” : \”#id\”, \”dataIndex\” : \”id\”,
\”width\” : 75, \”editable\” : true, \”editor\” : new
Ext.form.TextField({allowBlank: false}), \”sortable\” : true,
\”hidden\” : true  } ,”
        //   + ” {\”header\” : \”#port_id\”, \”dataIndex\” :
\”port_id\”, \”width\” : 75, \”editable\” : true, \”editor\” :
new Ext.form.TextField({allowBlank: false}), \”sortable\” : true,
\”hidden\” : false  } ,”
        //   + ” {\”header\” : \”#port_name\”, \”dataIndex\” :
\”port_name\”, \”width\” : 75, \”editable\” : true, \”editor\”
: new Ext.form.TextField({allowBlank: false}), \”sortable\” : true,
\”hidden\” : false  } ,”
        //   + ” {\”header\” : \”#region_id\”, \”dataIndex\” :
\”region_id\”, \”width\” : 75, \”editable\” : true, \”editor\”
: new Ext.form.TextField({allowBlank: false}), \”sortable\” : true,
\”hidden\” : false  } ,”
        //   + ” {\”header\” : \”#country_id\”, \”dataIndex\” :
\”country_id\”, \”width\” : 75, \”editable\” : true, \”editor\”
: new Ext.form.TextField({allowBlank: false}), \”sortable\” : true,
\”hidden\” : false  } ],”

, {
xtype: ‘textfield’,
田野Label: ‘商品名称’,
height: 20,
name: ‘productName’,
allowBlank: false,
value: null == rowObj ? null : rowObj.get(“productName”),
id: ‘productName’ + idstr
}
, {
xtype: ‘numberfield’,
fieldLabel: ‘价格’,
height: 20,
name: ‘money’,
allowBlank: false,
value: null == rowObj ? null : rowObj.get(“money”),
id: ‘money’ + idstr
}
, {
xtype: ‘textfield’,
fieldLabel: ‘地址’,
height: 20,
name: ‘address’,
value: null == rowObj ? null : rowObj.get(“address”),
id: ‘address’ + idstr
}
, {
xtype: ‘textfield’,
fieldLabel: ‘电话’,
height: 20,
name: ‘tel’,
value: null == rowObj ? null : rowObj.get(“tel”),
id: ‘tel’ + idstr
}
, {
xtype: ‘myhtmleditor’,
fieldLabel: ‘备注’,
height: 400, width: 600,
name: ‘remark’,
value: null == rowObj ? null : rowObj.get(“remark”),
id: ‘remark’ + idstr
}
, {
xtype: ‘numberfield’,
fieldLabel: ‘端口’,
height: 20,
name: ‘port’,
value: null == rowObj ? null : rowObj.get(“port”),
id: ‘port’ + idstr
}
],
buttons: [{
text: ‘保存’,
handler: function() {
if (!productsForm.form.isValid())
return;
productsForm.form.submit({
meghod: ‘post’,
url: !isNaN(idstr) && parseInt(idstr) > 0 ? productsUpdatePostUrl :
productsAddPostUrl,
waitMsg: ‘正在保存,请稍候…’,
success: function() {
Ext.MessageBox.show({
title: ‘保存结果’,
msg: ‘保存成功’,
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.INFO
});
},
failure: function() {
Ext.MessageBox.show({
title: ‘保存结果’,
msg: ‘保存失利’,
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.ERROR
});
}

        //+ “\”scope\” : \”demoserver\”,”
        //+ “\”entity\” : \”port_mast\”,”
        //+ ” \”sort\” : \”port_name\”,”
        //+ “\”dir\” : \”ASC\”,”
        //+ ” \”start\” : \”0\”,”
        //+ ” \”limit\” : \”25\”,”
        //+ ” \”id\” : \”port_id\”,”
        //+ ” \”root\” : \”items\”,”
        //+”  \”totalProperty\” : \”totalCount\”, “
        //+ ” \”totalCount\” : \”3\”}”
                //+ “} “;
                #endregion
            }
            return result;
        }
其壹和宗旨的grid
是南辕北辙的,不用定义ComlumnModal,只要在jason数据中定义就足以依照数量自动生成grid
header 等等的,比较实惠的呀,AutoGridPanel 是在gridpanel
的基本功扩大的,对那些ext javascript
相比较感兴趣的恋人能够研讨,小编近年正值看源代码,正在学习的情人能够谢谢交流
主站 http://extjs.com/
能够在论坛发帖子,这些论坛是很活泼的。

});

}
}]
});

}