当前位置: 首页 > 工具软件 > FineUI > 使用案例 >

FineUI开源版(ASP.Net)初学手册-部分JS整理

谭毅然
2023-12-01

 

 有人老找JS,我吧FineUI自己写的JS沾过来方便大家看看,在实现前端的时候更灵活

 
 
JS实例注释控件
F.readyF.ready(function(){});就是ready 很多方法都在这里写,写在页面后
F.alert F.alert('提示')FineUI 的提示框
F.confirm confirm: function (targetName, title, msg, okScript, cancelScript, iconShortName) {确认对话框
F.customEventF.customEvent(data)

向后台回发 参数为数据 用PageManager接收 ,

子页面回发父页面就是parent.F.customEvent(参数)

通用
F('ID') 选择器,返回控件实例
f_setTitleF('Panel1').f_setTitle('新的标题')(f_setTitle没有效果就用setTitle)设置控件的title 需要 this.f_state['Title'];通用
f_setCollapseF('Panel1').f_setCollapse();控制这折叠 需要 this.f_state['Collapsed'];Panel
f_isCollapsedF('Panel1').f_isCollapsed();判断是否折叠Panel
f_setCheckedF('CheckBox').f_setChecked();控制选中状态 Checked =trueCheckBox
f_setValue

F('text').f_setValue('值') (同理 获取就是getValue注意大小写,注意getValue没有f_,最新的4.2.2没有)

   <f:DropDownList runat="server" ID="DropDownList1" FocusOnPageLoad="true">...

<f:Button ID="Button1" Text="选中[可选择项8]" runat="server" OnClientClick="select8()"
                CssClass="marginr">

function select8() {
            F('<% =DropDownList1.ClientID %>').setValue('Value8');
        }

 

设置控件的值表单元素
getValueF('DropDownList1').getValue() 返回控件的值表单元素
enableRegExF('DropDownList1').enableRegEx=true 启用模糊查询表单元素
f_setLabelF('text'). f_setLabel('显示值')设置输入框表单的lable表单元素
f_getSelectedValuesvar values = F('CheckboxGroup').f_getSelectedValues();返回 CheckboxGroup的值["value1", "value2", "value3"]CheckboxGroup
f_loadDataF('ComboBox1').f_loadData(data);重置 ComboBox1 的数据源ComboBox
f_getTextByValueF('ComboBox1').f_getTextByValue('值');     通过值获取ComboBox1的显示文字,默认当前数据源ComboBox
listConfig.maxHeight var t = F('<% = DropDownList1.ClientID %>');
if(t.listConfig){t.listConfig={};}
t.listConfig.maxHeight=100;    
修改下拉框最大高度,设置后生效ComboBox
setTextF('Button1').setText('显示文字');(f_setText重写的方式不一样 By @长沙-雏鸟 )(checkbox的text是setBoxLabel)设置按钮的文字Button
f_getDataF('Grid1').f_getData()得到当前表格数据,数据库查询是当前页表格Grid
f_expandAllRowsF('Grid1').f_expandAllRows()  panel 的 展开是 expand展开所有的行扩展列Grid
f_collapseAllRowsF('Grid1').f_collapseAllRows()  panel 的 折叠是 collapse隐藏所有的行扩展列Grid
f_getSelectedCountF('Grid1').f_getSelectedCount()获取选中的行数,或者单元格数(单元格编辑模式)Grid
f_selectRowsF('Grid1').f_selectRows(rows)选中某些行,默认读取SelectedRowIndexArray数据Grid
f_selectAllRowsF('Grid1').f_selectAllRows()选中全部行Grid
f_getSelectedRowsF('Grid1').f_getSelectedRows()获取选中的行Grid
f_selectCellF('Grid1').f_selectCell()选中单元格(AllowCellEditing)。默认获取 SelectedCell 数据Grid
f_getSelectedCellF('Grid1').f_getSelectedCell()获取选中的单元格(AllowCellEditing)Grid
f_getHiddenColumnsF('Grid1').f_getHiddenColumns()获取隐藏列的名称列表Grid
f_getColumnsF('Grid1').f_getColumns()获取表格列Grid
f_deleteSelectedF('Grid1').f_deleteSelected()从Store中删除选中的行(或者单元格)Grid
f_addNewRecordF('Grid1').f_addNewRecord(data,true)添加一条新纪录 数据,是否显示在最底下Grid
f_getDeletedRowsF('Grid1').f_getDeletedRows()获取删除的行索引(在原始的列表中)Grid
columns[N].setTextF('Grid1').columns[0].setText("就是好")设置表头显示Grid
f_getCheckedNodesF('Tree1').f_getCheckedNodes()获取选中的节点Tree
f_getSelectedNodesF('Tree1').f_getSelectedNodes()获取选择的节点Tree
f_selectNodesF('Tree1').f_selectNodes()设置选择节点,不接受参数 读SelectedNodeIDArray属性Tree
parentNodenode.parentNode父节点,是个属性不是个方法,详见下面的实例Tree
set()

F.ready(function () {
            F('<% =Tree1.ClientID %>').on('checkchange', function (node, checked) {

       //node 当前触发的节点 checked 是否选中
                //父节点选中 注意set方法直接设置属性,而不是checked = true ,set会触发一系列操作
                //这种写法不会触发父节点的选中后台事件,而会触发当前节点的后台事件
                node.parentNode.set("checked", checked);
            });
  })

直接设置属性,这里只涉及的Tree,又让我想到了封装属性,此处有淫笑声

Tree
f_hideF('window1').f_hide()隐藏(关闭)window window(通用)
hideF("<%=panelMapMenuP.ClientID %>").hide(); 隐藏panel通用
f_hide_refreshF('window1').f_hide_refresh()隐藏刷新windowwindow
f_showF('window1').f_show(iframeUrl, windowTitle, width, height)显示窗体参数就不说了window(通用)
showF("<%=panelMapMenuP.ClientID %>").show(); 显示panel通用
f_maximizeF('window1').f_maximize()设置最大化window
markInvalidF('<% =TextArea1.ClientID%>').markInvalid("写点啥吧");表单字段验证【表单字段验证失败效果by@沈阳-Sunday】Form
clearInvalidF('<% =TextArea1.ClientID%>').clearInvalid();清除表单字段验证失败效果Form
startDayF('<% =DatePicker1.ClientID%>').startDay = 1;一周开始时间,0 星期日 1 星期一 ...Form.DatePicker
setFieldLabel F('<% =Label4.ClientID%>').setFieldLabel('11212');表单修改LableForm
completeEdit F(grid).f_cellEditing.completeEdit();强制完成正在编辑的单元格Grid
startEditByPosition F(grid).f_cellEditing.startEditByPosition({row:2,column2});跟具坐标编辑的单元格Grid
setActiveTab
(f_setActiveTab 这个方法取 f_stat[ActiveTabIndex]e)
F(tab).setActiveTab(index);通过index激活页签Tab
f_getActiveTabIndex F(tab).f_getActiveTabIndex();得到当前激活的页签号Tab
hideTab F(tab).hideTab(tabId);隐藏选项卡 选项卡IDTab
showTab F(tab).showTab(tabId);显示选项卡 选项卡IDTab
addTab F(tab).addTab(id, url, title, closable);新增选项卡 选项卡ID,地址,名称,是否关闭?Tab
getTab F(tab).getTab(tabId);得到选项卡 IDTab
removeTab F(tab).removeTab(tabId);移除选项卡 IDTab

先收集这些,其他的就是extjs原生的,也有常用的一些方法慢慢加吧用的到的都加上,没有的去 extjs api上看吧
再补充一次,与FineUI相关的js要放在</form>下面
 类似资料: