• combo选择框加载数据


    选择框加载数据:尝试了combo ,链接viewsta.js有问题:只显示第一个字符,其中还有一些属性下面知识点没介绍到。

    ------------------------------------------

    最终用下面方法完成:

    1、 加onchange

    <select style=" 227px; font-size:12px;" id="groupName" name="groupName"  onchange="getNewData();"></select>

         

    2、加Ajax异步数据传输:

    function getNewData(){

    //alert($("groupName").value+"~~!");

    var t=$("groupName").value;

    new Ajax.Request(

           '../statistics/viewstatistics.action?query=1&groupName='+encodeURI(encodeURI(t)),

           {

               method : 'post',

               onSuccess : function(transfer) {

               //alert("getnewData success");

               }

          });

    }

    ----------------------------------------------------------------------------------------------

    combo的知识点:

    使用时,在items里,类型(xtype)设置成combo。

    {

        xtype:'combo',

        store: new Ext.data.SimpleStore({

            fields: ["retrunValue", "displayText"],

            data: [

                [1,'小学'], [2,'初中'], [3,'高中'], [4,'中专'], [5,'大专'], [6,'大学']

            ]

        }),

        valueField :"retrunValue",

        displayField: "displayText",

        mode: 'local',

        forceSelection: true,

        blankText:'请选择学历',

        emptyText:'选择学历',

        hiddenName:'education',

        editable: false,

        triggerAction: 'all',

        allowBlank:false,

        fieldLabel: '学历',

        name: 'education',

        anchor:'90%'

    }

    在这里定义了一个store属性,就是选择值存储的地方,因为是在客户端的数据,所以使用了一个简单存储(SimpleStore)。

    在存储里,通过一个数组定义了retrunValue和displayText两个字段。

    retrunValue字段指定是提交给后台的值

    displayText字段指定是在下拉中显示的选择值。

    然后在data里定义了几组数据(data: [[1,'小学'],[2,'初中'],[3,'高中'],[4,'中专'],[5,'大专'],[3,'大学']]),可以看到,每组数据都是根据 fiedls的定义来组成的,数组里第一个值就是retrunValue的值,第二个值就是displayText的值,例如[1,'小学'],就表示 retrunValue是1,displayText是小学。下面就是很重要的一步了,设置下拉选择框的值和显示文本。

    设置了下拉选择框的提交值对象的是存储中的retrunValue字段(valueField :"retrunValue"),显示文本是存储中的displayText字段(displayField: "displayText"),通过这两个设置就可将存储中的数据和下拉框对应起来。

    因为数据是在本地,所以设置了模式为local(mode: 'local'),

    该下拉列表只允许选择,不允许输入(editable: false),

    而且是必须选择一个选项(forceSelection: true)。

    在没有选择值时显示为选择学历(emptyText:'选择学历')。

    提交form时,该项如果没有选择,则提示错误信息“请选择学历”(blankText:'请选择学历')。

    该选项值不允许为空(allowBlank:false)。

    要注意的是hiddenName和name属性,name只是改下拉的名称,作用是可通过,而hiddenName才是提交到后台的input的name。如果没有设置hiddenName,在后台是接收不到结构的,这个大家一定要注意。

    因为这个下拉是只能选择的,所以一定要设置属性triggerAction为all,不然当你选择了某个选项后,你的下拉将只会出现匹配选项值文本的选择项,其它选择项是不会再显示了,这样你就不能更改其它选项了。

    如果要为控件设置默认值,就设置属性value,value的值要设置为提交给后台的值,不要设置为显示文本。例如本例要设置大学为默认值,则设置value的值为6。

  • 相关阅读:
    关于前端框架讨论的链接
    和BEM的战斗:10个常见问题及如何避免
    BEM —— 源自Yandex的CSS 命名方法论
    JavaScript 语句后应该加分号么?
    彻底搞懂word-break、word-wrap、white-space
    ios UIImageWriteToSavedPhotosAlbum报错 NSPhotoLibraryAddUsageDescription
    Emmet使用手册
    vue-cli入门之项目结构分析
    ios移动端原生滚动条滚动不灵敏问题
    ios点击事件失效
  • 原文地址:https://www.cnblogs.com/guozhiguoli/p/3255321.html
Copyright © 2020-2023  润新知