Jquery Jsp 笔记汇总

软开作业题目 - 带解答.doc

夜晚笔记.doc

点击标题查看更多

给你一个表名，把该表的列取出来，为 json_object 使用

方案一：使用系统表   information_schema.COLUMNS

select * from information_schema.COLUMNS where table_name='orders' and table_schema='mysales';

常用：column_name,is_nullable,column_type,column_key,extra

column_key 里有PRI、Extra里有 auto_increment

注：不同的数据库下面可以有相同的表

drop procedure if exists p1;
delimiter $$
create procedure p1
(
$tablename varchar(100),
out $fieldset mediumtext
)
begin
select json_arrayagg(json_object('field',column_name,'type',column_type)) into $fieldset
from information_schema.columns where table_name=$tablename and table_schema='mysales';
end $$
delimiter ;
call p1('employees',@s);
select @s;

方案二
show columns 不过不能用into 
set @str = '';
show columns from emploees where @str:=concat(@str,if(@str<>'',',',''),
'{"field":"',lower(field),'","type":"',type,'"}');
select concat('[',@str,']');

注：在存储过程里用prepare语句

其他：white-space:nowrap  不换行 
overflowellipsis 多行文本溢出显示省略号

jsp 画图
写json
.....
xdata=[];
for(var i=0;i<rs.rows.length;i++){
r={};
r.name=rs.rows[i].customerid;
r.y=parseFloat(rs.rows[i].amt);
if(i==0){
r.sliced=true;
r.selected=true;
}
xdata.push(r);
}
console.log(xdata);
fn()

取青海省有哪些市

select * from city where parentnodeid='63';

取市有哪些区县

select * from city where parentnodeid='6301';

区县有哪些街道

select * from city where parentnodeid='630102';

四个地方取四个DIV ID
HTML DIV范例:
<div style="border:1px solid #95BBE7;font-size:13px;float:left;width:220px;margin:8px 0px 8px 8px;>
<div id="title" style="background-color:#E0ECFF;height:28px;line-height:28px;border-bottom:1px solid #95B8E7;">&nbsp;省份</div>
<div id="province" style="overflow:auto;height:352px;padding:2px 2px 4px 8px;"></div>
</div>

JS:
$(function(){
var p ={};
p.parentnodeid='';  //省份没有父节点
rs=myRunSqlProcedure('xxx',p);
rows=rs.rows;
str='';
for(var i=0;i<rows.length;i++){
      str+='<span style="display:inline-block;width:190px;"><a href="javascript:fn1(\''+rows[i].areaid
+'\')">' +rows[i].areaname +'</a></span>';
   }
$('#province').html(str);
$('#city').html('');
$('#district').html('');
$('#town').html('');
});

注：传Level为fn1函数用，用来判断输出到哪个层

即javascript:fn1(\''+rows[i].areaid+'\','+rows[i].level+')

function fn1(areaid)
{
var p ={};
p.parentnodeid=areaid;  //
rs=myRunSqlProcedure('xxx',p);
rows=rs.rows;
str='';
for(var i=0;i<rows.length;i++){
      str+='<span style="display:inline-block;width:190px;"><a href="javascript:fn1(\''+rows[i].areaid
+'\')">' +rows[i].areaname +'</a></span>';
   }
$('#province').html(str);
}

判断输出语句

if(level==1){
     $('#city').html(str);
     $('#district').html('');
     $('#town').html('');
}
elseif(level==2){
     $('#district').html(str);
     $('#town').html('');
}
elseif(level==3)$('#town').html(str);

//title里面加点过的值，把areaname传入fn1函数里

分页系统：
body里第一层 overflow-y:hidden  竖的滚动条不需要
表头table标签不加border

布局可以通过table布局

rows[i]是个对象
JSON.stringify把JSON转换成字符串才可以进行字符串的运算

javascript:fn(s) 传过去的是json

$.attr('readonly',true);

p.productid=$('#productid').val(); 把输入进控件的值取出来

if($('#xxx').length>0) 判断控件是否存在

checkbox 内置属性 onclick="xx(xx);" 点击后调用具体函数
$('#xxx').prop("checked",true);

id='_checkbox'+(row.sysrownow-1); 

this.options[this.options.selectedIndex].value  select里选中的值

批量只读或disabled
$('input, select, textarea').each(function(index)){
      var type=$(this).attr('type');
      if(type=='select')$(this).attr("disabled",true);
      else $(this).attr("readOnly","readOnly");
}

删除 $(this).val('');

增删改查函数使用

var row={};
row._action=''; // 采取何种行为  add、delete、replace
row._reloadflag=1; //修改数据后重新加载数据
row.customerid='xxxxx'

var p={};
p.data=[];
p.data.push(row);
p.database='';
p.tablename='mysales.customers';
p.keyfield='customerid';
p.sortfield='';
rs=myRunSqlProcedure('sys_runEditRows',p);

each循环 将各个控件的键、值保存到对象中

var row={};
$('input, select, textarea').each(function(index)){
      var id=$(this).attr('id');
      row[id]=$(this).val();
}

作业1：
自己设计一个页面，把easyui Form（表单）的控件能用的全部用上

<%@ include file="system/easyui_header_plugin.jsp"%>

头文件包含多个css、js引用

<div id="xxx" class="easyui-panel" data-options="title:'aaaaa',width:400" style=""></div>

data-options 填写控件属性，间隔逗号。style里面写html语句
style 比 data-options 执行要迟，js里最迟

js里面写控件class没效果，html里面class有效果

$('#XXX').textbox(); 真正动态产生控件

tips：外面加一个层把绝对定位放到层里

$('#XXX').textbox({
label:'',
labelwidth:'',
width:300,
labelAlign:'right'
});

控件生成函数

function CreateTextbox(xparent,xid,xlabel,xlabelwidth,xtop,xleft,xheight,xwidth,xvalue){
if(xheight<=0) xheight=28;
if(xlabelwidth<=0) xlabelwidth=70;
   str='<div style="position:absolute; top:'+xtop+'px; left:'+xleft+'px;">
<input id="'+xid+'" class="easyui-textbox" /></div>';
   $('#'+xparent).append(str);
   $('#'+xid).textbox({
   label: xlabel+':',
   labelwidth:xlabelwidth,
   height:xheight,
   width:xwidth,
   labelAlign:'right'
   });
}

$(...).numberbox('textbox').css("text-align","right");  //右对齐

取控件某一个属性
var w = $("#myForm1").panel('options').width;

修改文本框的值
$("#stunname").textbox('setValue','张学友');

事件
$("").textbox({
onChange:function(newv,oldv){},
buttonIcon:'locationIcon',
onClickButton:function(){
   s=$("#stuname").textbox('getValue');
   alert(s);
     }
})

用户定义函数

select sys_getPyCode($str) as pycode;

调用
p={];
p.str= 赋值
rs= 调用存储过程
var s = rs.rows[0].pycode;

myRunSqlProcedure 需要调用 system/easuui_functions.js

省份改变后，通过事件把城市data改变

$("").combobox({
data:rs.rows,
label:'省份',
labelWidth:66,
labelAlign:'right',
valueField: 'areaid',
textField: 'areaname',
height:28,
width:280,
onSelect:function(row){
  .....
  $("").combobox({data:rs.rows});
}
})

$("").combobox('select',rs.rows[10].areaid);

$("").combobox('loadData',rs.rows);  注意语句顺序

editable:false

if(rows.length>15) $().combox({panelHeight:200});
else  $().combox({panelHeight:'auto'});

格式变换器，每一行执行
formatter:function(row){
var opts= $(this).combobox('options');
s=row[opts.textField];
....
return s;

图标在 system/css/icon.css

添加一个按钮必须三步，第一个字符串，第二个append，第三个描述一下控件

var x = left+(i-1)*width;  每个按钮的left绝对定位

不能把 if(style.indexOf('plain')>=0) 写在控件属性里 

style=';'+style+';';

防止 style出现 xrplain;selectedd 这样的问题，判断用 ;plain;

class="easyui-separator"  竖线也用 $().linkbutton()

style==undefined  参数不定义

layout层中不要写东西
class="easyui-layout" data-options="fit:true" 可以写body里
centerpanel 剩下的  region=north/south/east/west

split:true 可以拉的分割线

audio:
controls  控制板
loop 循环播放

datalist('selectRow',0); 触发 控件里的 onSelected事件

Tabs 选项卡

filebox 列表

老祝的jsp程序的函数可以在easyui_functions里面找

Filebox的属性
buttonText  按钮文字
buttonAlign  按钮出现在哪边
multiple 多选文件

文件夹不一样，文件头也不一样

{sys.timestamp} 时间戳 

var files = $('#filebox1').filebox('files');取出选中的文件

files[i] 每个文件信息

取扩展名，源文件找到最后一个点，然后取后面的  
xxx.substring(xxx.lastIndexOf(".")+1,255).toLowerCase();

xhr.status ==200 上传正常
var rs= JSON.parse(xhr.responseText)   文件上传反馈
rs.filesourcename 上传的文件名

删除层 $('#myfile'+index).remove() 删除

将每个文件信息放进data数组

$().attr('xdata',JSON.stringify(data)); 添加属性

$().filebox('clear'); 上传后清空

var xtabs=$('#myTab').tabs('tabs');
n = xtabs.length+1;

closable 是否可关 
title 标题
selected 是否选中

iframe class='media'

flag 记住有没有被找到+找到第几个

Layout必须加 data-options="fit:true" 

先放panel后放datalist 不然没有滚动条 

datalist把最主要的内容显示出来，把存储过程函数改一下多列合并

函数可能没提供某些特定功能 
$('xxx').textbox({multiline: true;});

控件的名称和数据库的列名要一样

$('input, select, textarea').each(function(index){
    var id = $(this).attr('id');  // if(id!=undefined)
    row[id]=$(this).val(); // textbox('getValue')
}); 把控件取出来

id.substr(0,7)!='_easyui'

textarea 用 val()

隐藏变量
myHiddenFields('rowid;titlex');

var str=;<input hidden="true" type="hidden" id="rowid">;
$('body').append

addoredit = "replace"; 点过一行所有的保存都是修改的保存
点新增的才算 addoredit = "add"

保存完了之后要把 addoredit 改成replace

将选中的序号记录下来 rowindex=index;
选中 datalist('selectRow',rowindex)

删除数据库里面删掉，客户端也删除，但是光标要重新弄，第十行删除后，光标应该位于第九
if(rowindex==rows.length-1) rowindex--;

var n = $().datalist('getRows').length

删完后要判断 if(row==null) return;

filebox 里 id和name 值要一样 type 要写上，不然后面取出来是undefined

rs=myRunTreeProcedure('d0',p);
data:rs;
checkbox:true;
formatter:function(node){
    return ' ' + node.text;  //这里可以写层向左移
}

rowindex=null; 一个节点有没有用null 

type=='filebox'{ // JSON数组格式
if(value!='') value=value.substring(1,value.length-1);
else value='';
.attr('xfilename',value);
}

小图标可以修改，详细见代码

var roots=$('#myTree1').tree('getRoots'); 将根节点取出来

$().tree('select',roots[0].target);

数据库里删掉了，不重新加载数据，让用户看到的删掉
记载行的位置，然后删除，删除后光标需要换到下一个节点

删除前先把roots取出来，然后循环找到现在这个row节点是第几个节点
然后select，要判断删到最后一个的时候

var nodes = myGetBrotherTreeNode('myTree1', row); // 前后两兄弟+父节点 
if(bnodes[1]!=null) $('#myTree1').tree('select',bondes[1].target);
else if ..  判断第一个节点
else if ..   判断父节点

聚焦到第一个框框

fnFileupload('filepath'); 上传

try{
    尝试代码
}
catch(e){
    异常情况
}

var node = $('#myTree1').tree('find',newid);
找到了就聚焦

树,基本属性，数据加载，两个函数不要用错
树里面的小按钮小图标怎么去掉
取根节点，树里面删除节点，删除后定位两种方法，把所有节点找出来按序号定位（一层）
相关函数，歌曲保存后的节点

datagrid 最好加个属性  border:false

窗体要加按钮，在窗体里面再加个layout
窗体也分上下两部分，上面表单panel也要加border:false，下面工具栏

窗体先不能出来

modal 属性：true 窗体关掉才能点
resizble 属性：false 不给调整窗体大小
closed: true  写在data-options

按钮做了不喜欢扁平，可以操作 
$().linkbutton({
plain:false,
onClick:function(){$().window('close');}
});

datagrid:
rownumber: true  显示序号（位数过多可能有问题）
singleSelect 是否只选一条
selectOnCheck 当你打勾的时候选不选中
checkOnSelect 选中的时候打不打勾

colums 数组里面再加数组
title 名字 field（跟数据库一致） width haligh align 居中

frozenColumns

var row = $('#myGrid1').datagrid('getSelected');
if(!row) return;

窗体打开后再聚焦，赋值后语句功能就没有了
聚焦及全部选中

删除多行
not a function 对象错了

var rows= $().datagrid('GetChecked');

rows里面有很多东西，只需要把主键告诉删的东西

for...
{
var row ={};
row.studentid = rows[i].studentid;
row._action = 'delete';
}

datagrid('getRowIndex',rows[i]) 告诉它第几行，计算机告诉你在网格是第几行

倒着删

datagrid('deleteRows',index)

getData 和 getRows 是两回事

var msg='<center>共删除'+rows.length+'行<br>';

messager.confirm('系统提示',msg+'是否确定本次删除？',function(r){console.log(r);
if(r){}
})

删除一行的最好把关键字也放上来

$.messager.alert({
title:'',
msg:'',
fn:function(){}
})

$.messager.alert('系统提示','记录已删除成功！','error');  //info,warning

datagrid api找到column 列的属性

{.....某一列....
formatter: function(value,row,index){
    s='<div style="family:'times new roman';">'+value+'</div>'
  }
}