使用delphi 开发 web(四)使用ajax 与extjs交互

     随着现在各种js 框架(例如extjs,Jquery)的迅猛发展,很多网站都开始使用这些框架开始设计

web 页面,而且为了提高用户体验,大量使用了AJAX 技术,可以动态实现很多网页内容,

本文就以extjs 的grid 为例,介绍一下使用webbroke的服务器 与js 框架的交互。

先看一下下面的页面:

使用delphi 开发 web(四)使用ajax 与extjs交互

这个页面动态显示一个人员工资表,并可以实现翻页,这是一个典型的extjs  的grid。

其页面代码如下:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb3212">
<title>你好</title>

<link rel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/extjs/ext-all.js"></script>
<script type="text/javascript" >
Ext.onReady(function(){
    Ext.BLANK_IMAGE_URL="/extjs/resources/images/default/s.gif";
    // create the Data Store
    var store = new Ext.data.JsonStore({
        root: 'topics',
        totalProperty: 'totalCount',
        idProperty: 'threadid',
        remoteSort: true,

        fields: [
            'XH', 'XM', 'PYM', 'RSXH',
            {name: 'BYTS', type: 'int'},
            'JBGZ',
            {name:'HJ',type:'float'}, 'SFZH'
        ],
        
        proxy: new Ext.data.HttpProxy({
         url: '/web/oa?path=getdata'
        })
    });
    store.setDefaultSort('BH', 'desc');


    // pluggable renders
    function renderTopic(value, p, record){
        return String.format(
                '<b><a href="http://extjs.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',
                value, record.data.forumtitle, record.id, record.data.forumid);
    }
    function renderLast(value, p, r){
        return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);
    }

    var pagingBar = new Ext.PagingToolbar({
        pageSize: 25,
        store: store,
        displayInfo: true,
        displayMsg: '显示人数 {0} - {1} of {2}',
        emptyMsg: "没有数据",
        
        items:[
            '-', {
            pressed: true,
            enableToggle:true,
            text: '显示预览',
            cls: 'x-btn-text-icon details',
            toggleHandler: function(btn, pressed){
                var view = grid.getView();
                view.showPreview = pressed;
                view.refresh();
            }
        }]
    });

    var grid = new Ext.grid.GridPanel({
        el:'topic-grid',
        width:700,
        height:500,
        title:'人员工资表',
        store: store,
        trackMouseOver:false,
        disableSelection:true,
        loadMask: true,

        // grid columns
        columns:[{
            id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
            header: "编号",
            dataIndex: 'XH',
            width: 420,
           // renderer: renderTopic,
            sortable: true
        },{
            header: "姓名",
            dataIndex: 'XM',
            width: 100,
            align: 'right',
            //hidden: true,
            sortable: true
        },{
            header: "拼音码",
            dataIndex: 'PYM',
            width: 70,
            align: 'right',
            sortable: true
        },{
            header: "本月天数",
            dataIndex: 'BYTS',
            width: 70,
            align: 'right',
            sortable: true
        },{
            id: 'lastpost',
            header: "实发工资",
            dataIndex: 'HJ',
            width: 150,
           // renderer: renderLast,
            sortable: true
        }],

        // customize view config
        viewConfig: {
            forceFit:true,
            enableRowBody:true,
            showPreview:true,
            getRowClass : function(record, rowIndex, p, store){
                if(this.showPreview){
                    p.body = '<p>人事序号 :'+record.data.RSXH+'</p>';
                    return 'x-grid3-row-expanded';
                }
                return 'x-grid3-row-collapsed';
            }
        },

        // paging bar on the bottom
        bbar: pagingBar
    });

    // render it
    grid.render();

    // trigger the data store load
    store.load({params:{start:0, limit:25}});
});



/**
 * @class Ext.ux.SliderTip
 * @extends Ext.Tip
 * Simple plugin for using an Ext.Tip with a slider to show the slider value
 */
Ext.ux.SliderTip = Ext.extend(Ext.Tip, {
    minWidth: 10,
    offsets : [0, -10],
    init : function(slider){
        slider.on('dragstart', this.onSlide, this);
        slider.on('drag', this.onSlide, this);
        slider.on('dragend', this.hide, this);
        slider.on('destroy', this.destroy, this);
    },

    onSlide : function(slider){
        this.show();
        this.body.update(this.getText(slider));
        this.doAutoWidth();
        this.el.alignTo(slider.thumb, 'b-t?', this.offsets);
    },

    getText : function(slider){
        return slider.getValue();
          }
   });

</script>
<link rel="stylesheet" type="text/css" href="/ib/grid-examples.css" />
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="/ib/examples.css" />
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->


<div id="topic-grid"></div>

</body>
</html>

这个页面主要是使用这一句来获取服务器端的数据

proxy: new Ext.data.HttpProxy({
         url: '/web/oa?path=getdata'
        })

而extjs 需要的是json 数据,而URL:/web/oa?path=getdata 就是要返回对应的json 串。

getdata 的脚本代码为:

 <%
uses SysUtils, Classes;
var
  start,limit,sort,dir:string;
  s:string;
begin
 
 start:=request.queryfields.values['start'];
 limit:=request.queryfields.values['limit'];
 sort:=request.queryfields.values['sort'];
 dir:=request.queryfields.values['dir'];
  s:='select *  from gjj ';
 if sort<>'' then
   s:=s+' order  by "'+sort+'"'+ ' '+dir;
print(wm.datatojson( s,'0','',nil));
end.
%>

函数datatojson 的作用就是根据sql 和开始行及每页显示数及参数 生成数据集,并根据数据集生成

extjs 需要的JSON 串。为了生成JSON 我们使用了开源的Super Object Toolkit(呵呵,这个是免费的),

然后在服务器端实现这个函数就可以了(本例以oracle数据库为参考)。

function Twm.datatojson(datasql, startp, endp: string;
  inparams: tstringlist = nil): string;
var
  alljson: ISuperObject;
  datajson: ISuperObject;
  recordjson: ISuperObject;
  mycx: Twebquery;
  totalcount: string;
  starti, endi, i: integer;
begin


  if startp = '' then
    starti := 0
  else
    starti := strtoint(startp);

  alljson := TSuperObject.Create(stobject);
  mycx := Twebquery.Create(self);

  mycx.Connection := dbs  ;

  mycx.sql.clear;
  mycx.sql.add('select count(*) from (' + datasql + ')');
  if inparams <> nil then
  begin
    for i := 0 to inparams.Count - 1 do
    begin
      if inparams.Names[i] <> '' then
      begin
        mycx.Parambyname(inparams.Names[i]).AsString :=
          inparams.ValueFromIndex[i];
      end;
    end;
  end;

  try
   mycx.Open;
  except
     on E:Exception do
        begin

           result:='数据库打开错误!'+e.Message;
           exit;
        end;
 end;
  totalcount := mycx.fields[0].AsString;
  if totalcount > '0' then
  begin

    datajson := TSuperObject.Create(starray);
    with mycx do
    begin
      sql.clear;

       if endp = '' then
            endi := StrToInt(totalcount)
          else
            endi := strtoint(endp);

      sql.Add(' select * from ( select tttz.*,rownum as nnnz from (');

      sql.add(datasql);
      sql.Add(') tttz )');
      sql.Add(' where nnnz>='+IntToStr(starti + 1) +' and nnnz<='+IntToStr(starti + endi));



      if inparams <> nil then
      begin
        for i := 0 to inparams.Count - 1 do
        begin
          if inparams.Names[i] <> '' then
          begin
            mycx.Parambyname(inparams.Names[i]).AsString :=
              inparams.ValueFromIndex[i];
          end;
        end;
      end;
      try

         Open;
         except
        result:='数据库打开错误!2';
         exit;

      end;
      while not eof do
      begin
        recordjson := TSuperObject.Create(stobject);

        for i := 0 to fields.Count - 1 do
        begin
          recordjson.s[fields[i].FieldName] := fields[i].AsString;
        end;

        datajson.o[''] := recordjson;
        recordjson := nil;
        next;
      end;
    end;

    alljson.o['topics'] := datajson;

    alljson.s['totalCount'] := totalcount;

    datajson := nil;
  end;

  result := alljson.AsJSon();
  mycx.Free;
  alljson := nil;


end;

这样我们的服务器就可以与extjs 交互,并产生上面的页面了。

 

呵呵,是不是很酷,很简单?

 

 

上一篇:数据科学项目失败的八个原因


下一篇:Python标准模块和Python dir() 函数